3 svar · 228 visningar · startad av Jepro
Jag har stött på ettt problem med mina planer.. Jag tänkte lägga upp lite miniatyrbilder och när man för musen över dem så dycker det upp en större bild ovandör eller under i en ruta..
typ så här..
Stor bild!
Bild bild bild bild bild bild bild bild bild
sånär man för bilden över en av "bild"erna dycker det upp en stor bild där det står "Stor bild!" Fattar nån? Tacksam för svar!
Kolla "foto" på min sida, så menar du?
Kika i källan vet ja ;)
BTW: välkommen till wF :birp
EDIT:
Först lite css:
#t1{
position:absolute;
left:270px;
top:10px;
z-index:49;
visibility:hidden;
background-color:#ffffff;
border:solid 3px #c0c0c0;}
Sedan lite html(den "stora" bilden):
<div id="t1"><img src="img/thbigbild1.jpg" width="150px" height="113px" alt="bild 1 mellanstor"><span>Jag på hojen</span></div>
Sedan lite html+javascript(den lilla bilden):
<img src="img/thbild1.jpg" width="40px" height="40px" alt="bild 1 liten" class="link" onmouseout="document.getElementById ('t1').style.visibility='hidden'" onmouseover="document.getElementById ('t1').style.visibility='visible'">
Enkelt eller hur ;)
japp, det var så jag menade.. :)
Det är inte poppis att lösa problen via PM ;)
Andra kan ju också ha nytta av det.
Här har du sidan du efterfrågade ;)
<!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">
<meta http-equiv="content-style-type" content="text/css">
<title>Dinsida</title>
<style type="text/css">
#t1,#t2,#t3,#t4{
position:absolute;
left:270px;
top:10px;
z-index:49;
visibility:hidden;
background-color:#ffffff;
border:solid 3px #c0c0c0;}
.thumbs {position:absolute;
left:270px;
top:215px;
z-index:49;
}
</style>
</head>
<body>
<div id="t1"><img src="img/thbigbild1.jpg" width="150px" height="113px" alt="bild 1 mellanstor"></div>
<div id="t2"><img src="img/thbigbild2.jpg" width="150px" height="113px" alt="bild 2 mellanstor"></div>
<div id="t3"><img src="img/thbigbild3.jpg" width="150px" height="156px" alt="bild 3 mellanstor"></div>
<div id="t4"><img src="img/thbigbild4.jpg" width="150px" height="200px" alt="bild 4 mellanstor"></div>
<div class="thumbs">
<img src="img/thbild1.jpg" width="40px" height="40px" alt="bild 1 liten" class="link" onmouseout="document.getElementById ('t1').style.visibility='hidden'" onmouseover="document.getElementById ('t1').style.visibility='visible'"><img src="img/thbild1.jpg" width="40px" height="40px" alt="bild 2 liten" class="link" onmouseout="document.getElementById ('t2').style.visibility='hidden'" onmouseover="document.getElementById ('t2').style.visibility='visible'"><img src="img/thbild3.jpg" width="40px" height="40px" alt="bild 3 liten" class="link" onmouseout="document.getElementById ('t3').style.visibility='hidden'" onmouseover="document.getElementById ('t3').style.visibility='visible'"><img src="img/thbild4.jpg" width="40px" height="40px" alt="bild 4 liten" class="link" onmouseout="document.getElementById ('t4').style.visibility='hidden'" onmouseover="document.getElementById ('t4').style.visibility='visible'">
</div>
</body>
</html>