image map achtig iets

Status
Niet open voor verdere reacties.
M

milenaaa

Gebruiker
Lid geworden
10 dec 2007
Berichten
6
tja weet niet echt of dit bij html hoort.

ik wil een soort van image map maken. Dat is niet zo het probleem. alleen ik wil dat wanneer je over een bepaald gedeelte van de afb gaat de hele afbeelding veranderd. Maar hoe kan ik dit het best doen?
 
Het is meer javascript idd. ;)

Met een onmouseover (en out) in de area kun je een functie aanroepen:
PHP: 
<area ... onmouseover="show('foto.jpg')" onmouseout="show('start.jpg')">
En dan iets als:
PHP: 
<script type="text/javascript">
 function show(photo) {
  document.getElementById('kaart').src = photo;
  };
</script>

<img id="kaart" usemap= ......>
:)


Vr.Gr. Egel.
 
Het was inderdaad nog maar een opzetje. :)


Heb je de code van de image + map? Die kun je hier tussen
PHP: 
 en
 tags posten.

Dan is het vast te zien waar het misgaat. :)


En wil je dat de afbeelding weer terugverandert als je het 'bepaalde gedeelte' van de afbeelding weer verlaat met je muis?


Vr.Gr. Egel.
 
PHP: 
<head>

<title>Imagemap</title>

<script type="text/javascript"> 
 function show(photo) { 
  document.getElementById('begin2kopie').src = photo; 
  }; 
</script> 


</head>

<body>

<div>

<img src="begin2kopie.JPG"  height="" alt="" usemap="begin2kopie" style="border-style:none" />

</div>

<div>
<map id="begin2kopie" name="begin2kopie" height="" alt="" usemap="begin2kopie" >
<area shape="rect" alt="baasje" coords="172,504,725,649" href="baasje" title="baasje" target="baasje"  onmouseover="show('begin3kopie.jpg')" onmouseout="show('begin2kopie.jpg')">  
<area shape="rect" alt="portretten" coords="170,646,730,771" href="portretten" title="portretten" target="portretten" onmouseover="show('begin4kopie.jpg')" onmouseout="show('begin2kopie.jpg')">  
<area shape="rect" alt="schilderijen" coords="170,773,766,884" href="schilderijen" title="schilderijen" target="schilderijen" onmouseover="show('begin5kopie.jpg')" onmouseout="show('begin2kopie.jpg')">  
<area shape="rect" alt="beesten" coords="169,886,764,995" href="beesten" title="beesten" target="beesten" onmouseover="show('begin6kopie.jpg')" onmouseout="show('begin2kopie.jpg')">  
<area shape="rect" alt="beesten" coords="168,997,764,1114" href="keramiek" title="beesten" target="beesten" onmouseover="show('begin7kopie.jpg')" onmouseout="show('begin2kopie.jpg')">  
<area shape="default" nohref="nohref" alt="" />
</map>
</div>
</body>

</html>

Ja ik wil inderdaad dat hij terug gaat naar de oude afb wanneer je de gedeelte weer verlaat met de muis. Ik heb wel de hele image-map dus, met het opzetje erbij.
 
Zo werkt 't:
PHP: 
<head> 

<title>Imagemap</title> 

<script type="text/javascript">  
 function show(photo) {  
  document.getElementById('beginkopie').src = photo;  
  };  
</script>  


</head> 

<body> 

<div> 

<img src="begin2kopie.JPG" id="beginkopie" width="1280" height="1024" usemap="#begin2kopie" style="border-style:none" /> 
<map name="begin2kopie">
<area shape="rect" alt="baasje" coords="172,504,725,649" href="baasje" title="baasje" target="baasje"  onmouseover="show('begin3kopie.jpg')" onmouseout="show('begin2kopie.jpg')">   
<area shape="rect" alt="portretten" coords="170,646,730,771" href="portretten" title="portretten" target="portretten" onmouseover="show('begin4kopie.jpg')" onmouseout="show('begin2kopie.jpg')">   
<area shape="rect" alt="schilderijen" coords="170,773,766,884" href="schilderijen" title="schilderijen" target="schilderijen" onmouseover="show('begin5kopie.jpg')" onmouseout="show('begin2kopie.jpg')">   
<area shape="rect" alt="beesten" coords="169,886,764,995" href="beesten" title="beesten" target="beesten" onmouseover="show('begin6kopie.jpg')" onmouseout="show('begin2kopie.jpg')">   
<area shape="rect" alt="beesten" coords="168,997,764,1114" href="keramiek" title="beesten" target="beesten" onmouseover="show('begin7kopie.jpg')" onmouseout="show('begin2kopie.jpg')">   
<area shape="default" nohref="nohref" alt="" /> 
</map> 

</div> 

</body> 

</html>
De id moest bij de img staan, ik heb id="beginkopie" gebruikt (het is beter om niet twee keer hetzelfde te gebruiken) en bij usemap moest nog een #: usemap="#begin2kopie"

Je hebt zo nog wel een alt terwijl je al een title hebt en target is het frame waar de link in opent.

Als het alleen om de onmouseover gaat kunt je ook href="javascript:void()" gebruiken. :)

De width en height waren voor het testen, die moet je nog aanpassen aan de grote van de plaatjes die je gebruikt.


Vr.Gr. Egel.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan