Plaatje over plaatje, variabele positionering

  • Onderwerp starter Onderwerp starter Kusee
  • Startdatum Startdatum
Status
Niet open voor verdere reacties.
K

Kusee

Gebruiker
Lid geworden
6 feb 2007
Berichten
5
Ik wil een plaatje over een ander plaatje heen projecteren. Konkreet: een plattegrond, met daarbinnen een pijl die b.v. een plaats aangeeft.
Met normale html kan dat middels de volgende code :

div style="position:relative" name="A">
<img src="kaart.jpg" name="KRT" width=400 height=400 border=1>
<div style="position:absolute; top:90px; left:30px" name="S">
<img src="pijl.gif" border=1 name="B">
</div>
</div>

Tot zover geen probleem. De “top:90px” en “left:30px” geven de plaats van de pijl op de kaart in absolute pixels. Werkt prima.

Nu wil ik met javascript de positie van pijl.gif wijzigen. Naast de kaart zet ik b.v. drie links (Amsterdam, Rotterdam, Utrecht). Als ik over één van die links ga, wil ik (als gevolg van onMouseover) dat de pijl de juiste plaats aangeeft. Daartoe vul ik de html-code aan met

<a href="Am.htm" onMouseover="J('A')">Amsterdam</a><br>
<a href="Ro.htm" onMouseover="J('R')">Rotterdam</a><br>
<a href="Ut.htm" onMouseover="J('U')">Utrecht</a><br>

Bovenin mijn pagina zet ik een javascript-functie, zoiets als het volgende:

function J(code) {
if (code==’A’) document.images['B'].leftpos=200;
if (code==’B’) document.images['B'].leftpos=100;
if (code==’C’) document.images['B'].leftpos=300;
}

(en naast leftpos moet er uiteraard ook zoiets komen als toppos).

De hierboven genoemde code werkt echter niet.
Weet iemand een goede oplossing voor dit probleem ?
 
function J(code) {
if (code==’A’) document.images['B'].style.left=200;
if (code==’B’) document.images['B'].style.left=100;
if (code==’C’) document.images['B'].style.left=300;
}

Zelfde met toppos : document.images['B'].style.top = 50 ;

Greetz : Jer:cool:en.
 
Beste Jeroen,
Dank voor het beantwoorden van mijn oproep. Maar, zoals je in de vraag kunt zien is dit nou juist de code die NIET werkt. Ik zoek naar een wel werkende code om het plaatje dynamisch te verplaatsen.
 
Het was even zoeken, en toen werkte het nog niet.
Foutje opgesnord.

Sla deze code op als html file en je kunt zien of het werkt.

PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head><title>The Recard's Photo Album</title>
<!--
....................................................................
-->
<script language="JavaScript">
<!-- Beginning of JavaScript
function ShowOrHide(value)
{
 if (value==0)
{
if
 (document.layers)
document.layers['layer1'].visibility='hide';
 else  document.all['layer1'].style.visibility='hidden';}
 else if (value==1) 
{if (document.layers)
document.layers['layer1'].visibility='show';
 else  document.all['layer1'].style.visibility='visible';}

}          

function ShowOrHide2(value)
{
 if (value==0)
{
if (document.layers)
document.layers['layer2'].visibility='hide';
 else  document.all['layer2'].style.visibility='hidden';}
 else if (value==2) {if (document.layers)
document.layers['layer2'].visibility='show';
 else  document.all['layer2'].style.visibility='visible';}

}



End of Script -->
</script>

<!--
....................................................................
-->
</head>

<body background="sideline.gif">

<font face="Arial"
      size="4"
      style="position: absolute;"
      color="Yellow">P h o t o&nbsp;&nbsp;&nbsp;A l b u m</font>

<div align=""
     style="position: absolute; left: 205; top: 36;">
<hr
    width="383"
    color="Blue">
</div>

<!--
....................................................................
-->
<!--  Show Layer1 when cursor placed here  -->
<a href="javascript:void(0)" onmouseover="ShowOrHide(1);" onmouseout="ShowOrHide(0);">
<img src="GoNcr.jpg"
         width=156 height=36 border=0 alt=""
         style="position: absolute; left: 12; top: 65;">
</a>

<!--  Show Layer2 when cursor placed here  -->
<a href="javascript:void(0)" onmouseover="ShowOrHide2(2);" onmouseout="ShowOrHide2(0);" >
<img src="GoDpr.jpg"
         width=156 height=36 border=0 alt=""
         style="position: absolute; left: 12; top: 145;">
</a>
<!--
....................................................................
-->

<div style="position: absolute; left: 205; top: 50;">
<img src="http://www.alpha-cursus.nl/site_assets/elements/nederland_op_kaart.gif" alt="plattegrond">
 </div>

<!--  pijltje   -->
<div align=""
     id="layer1" id="1"
     style="position: absolute; left: 405; top: 180; visibility:hidden;">
<img src="http://images.google.com/images?q=tbn:BviFwQPqYhbhxM:http://www.marketingtools.nl/images/home-pijltje.gif" width="15" height="15" alt="">
</div>

<!--  pijltje  -->
<div align=""
     id="layer2"  id="2" style="position: absolute; left: 375; top: 200; visibility:hidden;">
<img src="http://images.google.com/images?q=tbn:BviFwQPqYhbhxM:http://www.marketingtools.nl/images/home-pijltje.gif" width="15" height="15" alt="">
</div>



<!--
....................................................................
-->

<div align=""
     style="position: absolute; left: 205; top: 386;">
<hr
    width="383"
    color="Blue">Positie van de pijltje instellen</div>

<div align=""
     style="position: absolute; left: 5; top: 325;">
<font face="Comic Sans MS" size="1"
color="Yellow">Ergens gevonden op en internet forum.<br>
Was een post van deze vragensteller: &copy;&nbsp;Copyright 2000 D.P. Recard</font>
</div>

</body></html>
 
Kusee zei:
Maar, zoals je in de vraag kunt zien is dit nou juist de code die NIET werkt.
Klik om te vergroten...

Misschien Jeroen zijn code eens herbekijken? de (onbestaande) code 'leftpos' is vergangen door de bestaande (en voor zover ik weet geldige) code 'style.left'.

Dit is duidelijk iets anders dan jouw niet-werkende code,

--Johan
 
Dit lijkt me handig en klein:
PHP: 
<script type="text/javascript">
 function wijzer(x,y) {
  var pijl = document.getElementById('pijl'), kaart = document.getElementById('kaart');
  pijl.style.visibility = (x < 0 ? 'hidden' : 'visible')
  x += kaart.offsetLeft;
  y += kaart.offsetTop;
  while (kaart.offsetParent) {
   kaart = kaart.offsetParent;
   x += kaart.offsetLeft;
   y += kaart.offsetTop;
   };
  pijl.style.left = x + 'px';
  pijl.style.top  = y + 'px';
  };
</script>

<img src="kaart.jpg" id="kaart" width="400" height="400" border="1">
<img src="pijl.gif" id="pijl" style="position: absolute; top: 0px; left: 0px; z-index: 1; visibility: hidden;">

<br><br>
<a href="Am.htm" onmouseover="wijzer(140, 80)">Amsterdam</a> |
<a href="Ro.htm" onmouseover="wijzer( 60,320)">Rotterdam</a> |
<a href="Ut.htm" onmouseover="wijzer(320,280)">Utrecht</a>
werkt met Ie en Fx. :)

Het script berekent de marge links-boven van de kaart en telt daar de coördinaten van de wijzer(x,y) bij op. Zo kun je de kaart overal plaatsen. wijzer(-1,y) verbergt de pijl weer.


Vr.Gr. Egel.

P.s.
Je kunt het beste met wordpad oid werken voor broncode, zo voorkom je foute komma's zoals hierbij rond de A
if (code==’A’) document.images['B'].style.left=200;
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan