mouse.over?

3 svar · 228 visningar · startad av Jepro 17 jan. 2004

JeproMedlem sedan jan. 20042 inlägg

Trådstart17 jan. 2004 19:30#1

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!

frankofMedlem sedan jan. 20016 874 inlägg

17 jan. 2004 19:34#2

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

JeproMedlem sedan jan. 20042 inlägg

17 jan. 2004 19:37#3

japp, det var så jag menade..

frankofMedlem sedan jan. 20016 874 inlägg

18 jan. 2004 16:07#4

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>