''onmouseover'' faalt half om half...
Ik ben bezig met het maken van een site voor een kroeg, Nu heb ik op een pagina over de zaal een soort lightbox gemaakt, thumbshow ding.. :P
En hij laat 3 foto`s van de zaal zien, En wanneer je een mouseover doet, Laat hij hem in het groot zien aan de zijkant van de kleine thumbs...
Nu heb ik helaas het probleem dat er naast de 3 kleine thumbs een image staat, die dwars door mijn vergrote thumb gaat?
voorbeeld hier
eenmaal op de pagina even met je cursor over een van de 3 foto`s gaan en je zal zien wat ik hierboven uit probeer te leggen...
Ik zal het script hieronder neerzetten, iemand enig idee hoe ik dit oplos?
Quote:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Café de klok</title>
<style type="text/css">
body
{
background-color: #FFFFFF;
color: #000000;
}
</style>
<style type="text/css">
a:hover
{
color: #90F518;
}
</style>
<!--[if lt IE 7]>
<style type="text/css">
img { behavior: url("pngfix.htc"); }
</style>
<![endif]-->
</head>
<body>
<div id="bv_Image2" style="margin:0;padding:0;position:absolute;left:0px;top:0px;width:1104px;height:828px;text-align:left;z-index:0;">
<img src="images/agrond2.png" id="Image2" alt="" align="top" border="0" style="width:1104px;height:828px;"></div>
<input type="submit" id="Button1" onclick="window.location.href='http://www.fatal-crime.com/v2.0/homepage.php'; ;return false;" name="Homepage" value="Homepage" style="position:absolute;left:118px;top:30px;width:146px;height:59px;font-family:Arial;font-weight:bold;font-size:13px;z-index:1" title="de startpagina">
<input type="submit" id="Button2" onclick="window.location.href='http://www.fatal-crime.com/v2.0/dezaal.php'; ;return false;" name="De zaal" value="De zaal" style="position:absolute;left:262px;top:30px;width:146px;height:59px;font-family:Arial;font-weight:bold;font-size:13px;z-index:2" title="Alles over onze zaal">
<input type="submit" id="Button3" onclick="window.location.href='http://www.fatal-crime.com/v2.0/fotoalbum.php'; ;return false;" name="Foto-album" value="Foto-album" style="position:absolute;left:406px;top:30px;width:146px;height:59px;font-family:Arial;font-weight:bold;font-size:13px;z-index:3" title="Hier vind je geregeld nieuwe foto`s">
<input type="submit" id="Button4" onclick="window.location.href='http://www.fatal-crime.com/v2.0/agenda.php'; ;return false;" name="Agenda" value="Agenda" style="position:absolute;left:550px;top:30px;width:146px;height:59px;font-family:Arial;font-weight:bold;font-size:13px;z-index:4" title="Wanneer is wat nou eigenlijk?">
<input type="submit" id="Button5" onclick="window.location.href='http://www.fatal-crime.com/v2.0/gastenboek/gastenboek.php'; ;return false;" name="Gastenboek" value="Gastenboek" style="position:absolute;left:694px;top:30px;width:146px;height:59px;font-family:Arial;font-weight:bold;font-size:13px;z-index:5" title="Laat een berichtje achter a.u.b!">
<input type="submit" id="Button6" onclick="window.location.href='http://www.fatal-crime.com/v2.0/contact.php'; ;return false;" name="Contact" value="Contact" style="position:absolute;left:838px;top:30px;width:146px;height:59px;font-family:Arial;font-weight:bold;font-size:13px;z-index:6" title="Via deze pagina kunt u heel gemakkelijk contact met ons opnemen">
<div id="bv_TextArt1" style="margin:0;padding:0;position:absolute;left:642px;top:132px;width:291px;height:82px;text-align:center;z-index:7;">
<img src="images/bv01018.png" id="TextArt1" alt="" title="" style="border-width:0;width:291px;height:82px"></div>
<head>
<style type="text/css">
.fotocontainer { position: relative; height: 210px; /* aanpassen aan de hoogte van de grootste afbeelding */ }
/* css-kenmerken kleine afbeelding (indien gewenst) */
.thumb img { }
.thumb:hover { }
.thumb:hover img { }
/* css-kenmerken grote afbeelding */
.thumb span { position: absolute; visibility: hidden; }
.thumb span img { border: solid thin #999999 }
.thumb:hover span {
visibility: visible;
top: 0px; left: 278px;
font-family: arial; font-size: 10pt; text-decoration: none; color: #000000; text-align: center;
z-index: 100; }
</style>
</head>
<body>
<div class="fotocontainer" style="margin:0;padding:0;position:absolute;left:160px;top:160px;width:244px;height:60px;text-align:left;z-index:9;">
<a class="thumb" href="#"><img src="fotoalbum/fotos/foto1b.jpg" width="220px" height="165px" border="0" alt="foto1">
<span><img src="fotoalbum/fotos/foto1.jpg"><br></span></a><br>
<a class="thumb" href="#"><img src="fotoalbum/fotos/foto2.jpg" width="220px" height="165px" border="0" alt="foto2">
<span><img src="fotoalbum/fotos/foto2.jpg"><br></span></a><br>
<a class="thumb" href="#"><img src="fotoalbum/fotos/foto3.jpg" width="220px" height="165px" border="0" alt="foto3">
<span><img src="fotoalbum/fotos/foto3.jpg"><br></span></a><br>
</div>
</body>
<div id="bv_BulletedList1" style="margin:0;padding:0;position:absolute;left:643px;top:508px;width:244px;height:146px;text-align:left;z-index:9;">
<table width="100%" border="0" cellpadding="0" cellspacing="2" id="BulletedList1">
<tr>
<td align="left" valign="top" bordercolor="#C0C0C0" width="72" height="18"><font style="font-size:15px;color=#000000;font-family:Arial">•</font></td>
<td align="left" valign="top" bordercolor="#C0C0C0" width="166" height="18"><font style="font-size:13px" color="#000000" face="Arial"> Zaal +/- 40 m²</font></td>
</tr>
<tr>
<td align="left" valign="top" bordercolor="#C0C0C0" width="72" height="82"><font style="font-size:15px;color=#000000;font-family:Arial">•</font></td>
<td align="left" valign="top" bordercolor="#C0C0C0" width="166" height="82"><font style="font-size:13px" color="#000000" face="Arial"> Kroeg +/- 45m²<br>
<br>
<br>
<br>
</font></td>
</tr>
<tr>
<td align="left" valign="top" bordercolor="#C0C0C0" width="72" height="18"><font style="font-size:15px;color=#000000;font-family:Arial">•</font></td>
<td align="left" valign="top" bordercolor="#C0C0C0" width="166" height="18"><font style="font-size:13px" color="#000000" face="Arial">Zaal +/- 60 personen </font></td>
</tr>
<tr>
<td align="left" valign="top" bordercolor="#C0C0C0" width="72" height="18"><font style="font-size:15px;color=#000000;font-family:Arial">•</font></td>
<td align="left" valign="top" bordercolor="#C0C0C0" width="166" height="18"><font style="font-size:13px" color="#000000" face="Arial">Kroeg +/- 65 personen</font></td>
</tr>
</table></div>
<div id="bv_TextArt2" style="margin:0;padding:0;position:absolute;left:689px;top:472px;width:187px;height:34px;text-align:center;z-index:10;">
<img src="images/bv01019.png" id="TextArt2" alt="" title="" style="border-width:0;width:187px;height:34px"></div>
<div id="bv_TextArt3" style="margin:0;padding:0;position:absolute;left:689px;top:570px;width:187px;height:34px;text-align:center;z-index:11;">
<img src="images/bv01020.png" id="TextArt3" alt="" title="" style="border-width:0;width:187px;height:34px"></div>
<div id="bv_Shape1" style="margin:0;padding:0;position:absolute;left:630px;top:233px;width:310px;height:215px;text-align:center;z-index:12;">
<img src="images/bv01021.gif" id="Shape1" alt="" title="" style="border-width:0;width:310px;height:215px"></div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Café de klok</title>
<style type="text/css">
body
{
background-color: #FFFFFF;
color: #000000;
}
</style>
<style type="text/css">
a:hover
{
color: #90F518;
}
</style>
<!--[if lt IE 7]>
<style type="text/css">
img { behavior: url("pngfix.htc"); }
</style>
<![endif]-->
</head>
<body>
<div id="bv_Image2" style="margin:0;padding:0;position:absolute;left:0px;top:0px;width:1104px;height:828px;text-align:left;z-index:0;">
<img src="images/agrond2.png" id="Image2" alt="" align="top" border="0" style="width:1104px;height:828px;"></div>
<input type="submit" id="Button1" onclick="window.location.href='http://www.fatal-crime.com/v2.0/homepage.php'; ;return false;" name="Homepage" value="Homepage" style="position:absolute;left:118px;top:30px;width:146px;height:59px;font-family:Arial;font-weight:bold;font-size:13px;z-index:1" title="de startpagina">
<input type="submit" id="Button2" onclick="window.location.href='http://www.fatal-crime.com/v2.0/dezaal.php'; ;return false;" name="De zaal" value="De zaal" style="position:absolute;left:262px;top:30px;width:146px;height:59px;font-family:Arial;font-weight:bold;font-size:13px;z-index:2" title="Alles over onze zaal">
<input type="submit" id="Button3" onclick="window.location.href='http://www.fatal-crime.com/v2.0/fotoalbum.php'; ;return false;" name="Foto-album" value="Foto-album" style="position:absolute;left:406px;top:30px;width:146px;height:59px;font-family:Arial;font-weight:bold;font-size:13px;z-index:3" title="Hier vind je geregeld nieuwe foto`s">
<input type="submit" id="Button4" onclick="window.location.href='http://www.fatal-crime.com/v2.0/agenda.php'; ;return false;" name="Agenda" value="Agenda" style="position:absolute;left:550px;top:30px;width:146px;height:59px;font-family:Arial;font-weight:bold;font-size:13px;z-index:4" title="Wanneer is wat nou eigenlijk?">
<input type="submit" id="Button5" onclick="window.location.href='http://www.fatal-crime.com/v2.0/gastenboek/gastenboek.php'; ;return false;" name="Gastenboek" value="Gastenboek" style="position:absolute;left:694px;top:30px;width:146px;height:59px;font-family:Arial;font-weight:bold;font-size:13px;z-index:5" title="Laat een berichtje achter a.u.b!">
<input type="submit" id="Button6" onclick="window.location.href='http://www.fatal-crime.com/v2.0/contact.php'; ;return false;" name="Contact" value="Contact" style="position:absolute;left:838px;top:30px;width:146px;height:59px;font-family:Arial;font-weight:bold;font-size:13px;z-index:6" title="Via deze pagina kunt u heel gemakkelijk contact met ons opnemen">
<div id="bv_TextArt1" style="margin:0;padding:0;position:absolute;left:642px;top:132px;width:291px;height:82px;text-align:center;z-index:7;">
<img src="images/bv01018.png" id="TextArt1" alt="" title="" style="border-width:0;width:291px;height:82px"></div>
<head>
<style type="text/css">
.fotocontainer { position: relative; height: 210px; /* aanpassen aan de hoogte van de grootste afbeelding */ }
/* css-kenmerken kleine afbeelding (indien gewenst) */
.thumb img { }
.thumb:hover { }
.thumb:hover img { }
/* css-kenmerken grote afbeelding */
.thumb span { position: absolute; visibility: hidden; }
.thumb span img { border: solid thin #999999 }
.thumb:hover span {
visibility: visible;
top: 0px; left: 278px;
font-family: arial; font-size: 10pt; text-decoration: none; color: #000000; text-align: center;
z-index: 100; }
</style>
</head>
<body>
<div class="fotocontainer" style="margin:0;padding:0;position:absolute;left:160px;top:160px;width:244px;height:60px;text-align:left;z-index:9;">
<a class="thumb" href="#"><img src="fotoalbum/fotos/foto1b.jpg" width="220px" height="165px" border="0" alt="foto1">
<span><img src="fotoalbum/fotos/foto1.jpg"><br></span></a><br>
<a class="thumb" href="#"><img src="fotoalbum/fotos/foto2.jpg" width="220px" height="165px" border="0" alt="foto2">
<span><img src="fotoalbum/fotos/foto2.jpg"><br></span></a><br>
<a class="thumb" href="#"><img src="fotoalbum/fotos/foto3.jpg" width="220px" height="165px" border="0" alt="foto3">
<span><img src="fotoalbum/fotos/foto3.jpg"><br></span></a><br>
</div>
</body>
<div id="bv_BulletedList1" style="margin:0;padding:0;position:absolute;left:643px;top:508px;width:244px;height:146px;text-align:left;z-index:9;">
<table width="100%" border="0" cellpadding="0" cellspacing="2" id="BulletedList1">
<tr>
<td align="left" valign="top" bordercolor="#C0C0C0" width="72" height="18"><font style="font-size:15px;color=#000000;font-family:Arial">•</font></td>
<td align="left" valign="top" bordercolor="#C0C0C0" width="166" height="18"><font style="font-size:13px" color="#000000" face="Arial"> Zaal +/- 40 m²</font></td>
</tr>
<tr>
<td align="left" valign="top" bordercolor="#C0C0C0" width="72" height="82"><font style="font-size:15px;color=#000000;font-family:Arial">•</font></td>
<td align="left" valign="top" bordercolor="#C0C0C0" width="166" height="82"><font style="font-size:13px" color="#000000" face="Arial"> Kroeg +/- 45m²<br>
<br>
<br>
<br>
</font></td>
</tr>
<tr>
<td align="left" valign="top" bordercolor="#C0C0C0" width="72" height="18"><font style="font-size:15px;color=#000000;font-family:Arial">•</font></td>
<td align="left" valign="top" bordercolor="#C0C0C0" width="166" height="18"><font style="font-size:13px" color="#000000" face="Arial">Zaal +/- 60 personen </font></td>
</tr>
<tr>
<td align="left" valign="top" bordercolor="#C0C0C0" width="72" height="18"><font style="font-size:15px;color=#000000;font-family:Arial">•</font></td>
<td align="left" valign="top" bordercolor="#C0C0C0" width="166" height="18"><font style="font-size:13px" color="#000000" face="Arial">Kroeg +/- 65 personen</font></td>
</tr>
</table></div>
<div id="bv_TextArt2" style="margin:0;padding:0;position:absolute;left:689px;top:472px;width:187px;height:34px;text-align:center;z-index:10;">
<img src="images/bv01019.png" id="TextArt2" alt="" title="" style="border-width:0;width:187px;height:34px"></div>
<div id="bv_TextArt3" style="margin:0;padding:0;position:absolute;left:689px;top:570px;width:187px;height:34px;text-align:center;z-index:11;">
<img src="images/bv01020.png" id="TextArt3" alt="" title="" style="border-width:0;width:187px;height:34px"></div>
<div id="bv_Shape1" style="margin:0;padding:0;position:absolute;left:630px;top:233px;width:310px;height:215px;text-align:center;z-index:12;">
<img src="images/bv01021.gif" id="Shape1" alt="" title="" style="border-width:0;width:310px;height:215px"></div>
</body>
</html>
Verder is de code alles behalve leesbaar. Tot mijn schrik staan er 2 body's en 2 head's in. WHYYY??????? (copy/paste?)
Haal verder eens alle inline style elementen eruit en maak hier een duidelijk bestand van.
enz. enz. enz.
Ik kom er niet uit dus ga hulp vragen ja mijn scripts zijn niet de beste, Maargoed ze werken :w
Iig bedankt voor je hulp
Toevoeging op 28/01/2012 13:02:33:
Het heeft gewerkt, Jammer dat je me even op alles moest bikritiseren, maar toch bedankt
Topic mag dicht/weg.