[HTML] Plaatjes over elkaar, hoe?

[Verwijderd]

Hallo,

Ik ben bezig voor een simpele site voor een project op de TU Delft en ik nader het einde. Ik kom echter 1 probleem tegen bij het plaatsen van foto's van de groep.

Om het verhaal kort te houden kun je hier mijn probleem bekijken:
http://project.3me.tudelft.nl/Project2008/wb21/groep.html


De bedoeling is dat er per naam een foto verschijnt en dat voor iedereen op dezelfde plek. Ook nog een te verhelpen probleem hierbij is dat de foto's openen voordat de mouseover actie begint.

Graag hoor ik tips of krijg ik links met oplossingen. Ik heb zelf al gezocht maar niks gevonden helaas!

De code:

<a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()"><p>Lex Blenkers</p>
<a href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()"><p>Has Minkels</p>
<a href="#" onmouseover="mopen('m5')" onmouseout="mclosetime()"><p>Martijn Rutgers</p>
<a href="#" onmouseover="mopen('m6')" onmouseout="mclosetime()"><p>Mark Valkenier</p>
<a href="#" onmouseover="mopen('m7')" onmouseout="mclosetime()"><p>Robert de Vos</p>
<a href="#" onmouseover="mopen('m8')" onmouseout="mclosetime()"><p>Matthijs van der Linden</p>
<a href="#" onmouseover="mopen('m9')" onmouseout="mclosetime()"><p>Hidde van der Meulen</p>

<div id="m3" >
<img src="images/fotos/lex.jpg" alt="lex" border="0" width="100" height="100" align="left" />
</div>
<div id="m4" >
<img src="images/fotos/has.jpg" width="100" height="100" align="left" />
</div>
<div id="m5" >
<img src="images/fotos/martijn.jpg" width="100" height="100" align="left" />
</div>
<div id="m6" >
<img src="images/fotos/mark.jpg" width="100" height="100" align="left" />
<br></br>
</div>
<div id="m7" >
<img src="images/fotos/robert.jpg" width="100" height="100" align="left" />
</div>
<div id="m8" >
<img src="images/fotos/matthijs.jpg" width="100" height="100" align="left" />
</div>
<div id="m9" >
<img src="images/fotos/hidde.jpg" width="100" height="100" align="left" />
</div>

[BalusC]

HTML is geen programeertaal. Het is een opmaaktaal. Je had het topic eigenlijk in Webdesign, Markup & Clientside Scripting moeten plaatsen.

Terugkomend op je probleem: gebruik gewoon 1 <img> element en verander diens 'src' attribuut op onmouseover/out.

[RobIII]

Waar hoort mijn topic?
PRG >> WEB

En voor code gebruiken we geen quotes maar code tags

[ Voor 37% gewijzigd door RobIII op 13-10-2008 17:23 ]

[Verwijderd]

Hoi,

Zou je dat truucje iets specifieker kunnen toelichten, ik begrijp het principe maar weet niet wat voor code daarvoor staat. De src aanpassen per mouseover

[RobIII]

Verwijderd schreef op maandag 13 oktober 2008 @ 17:24:
Hoi,

Zou je dat truucje iets specifieker kunnen toelichten, ik begrijp het principe maar weet niet wat voor code daarvoor staat. De src aanpassen per mouseover

http://www.google.com/sea...vascript+change+image+src

[BalusC]

Daarnaast, er staan nette JS en HTML DOM tutorials op w3schools.com. Doe er je voordeel mee

[Verwijderd]

Het is helemaal niet nodig om te werken met allemaal scripting languages.
Kijk eens goed wat je met CSS aan kunt vangen. Hint: :hover en background. Als je wilt 'preloaden' gebruik dan gewoon background-position.

[BalusC]

Ook als het een ander element betreft dan waarop je de pseudoclass/property aanroept?

[Verwijderd]

BalusC schreef op donderdag 16 oktober 2008 @ 19:40:
Ook als het een ander element betreft dan waarop je de pseudoclass/property aanroept?

Point taken, negeer mijn opmerking maar.