Till Startsidan

Skaffa webbhotell?
Läs JavaScript.nu's jämförelse av webbhotell.
Med priser från
9 kr / månad.

Genom ett samarbete får alla JavaScript.nu-
besökare dessutom 100 kr i rabatt vid beställning.


bildvisning

[ JavaScript.nu's Forum ] [ Viktigt om forumet ] [ JavaScript.nu's Startsida ]


Forum / bildvisning
 Hej!
Jag sitter och ska få bilder att "poppa" ut när jag drar musen över dem. Problemet är att bildtexten inte dyker upp förrän den 2:a gången jag gör det -och bara om jag gör det underifrån (jättekonstigt). Sen byts bilderna även om jag drar över den tomma ytan på sidan.
Sen vill jag ju att den stora bilden ska visas vid sidan om den lilla bilden, men just nu visas alla på samma ställe.
Har försökt pilla lite med z-index, men förstår det inte riktigt...

Vore jättetacksam för lite hjälp!!
/Ulrika


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Uppgift 6</title>
<link rel="stylesheet" type="text/css" href="style6.css" />
<script type="text/javascript">
var picIx;

function showPict(show, nr){
var imgText = document["image"+nr].alt;
document.getElementById("picText"+nr).innerHTML = imgText;

if(show)
document.getElementById("BigPic"+nr).style.visibility = "visible";
else
document.getElementById("BigPic"+nr).style.visibility = "hidden";



box[picIx].style.zIndex = 10;
var z = 9;
for (var i=picIx+1; i<box.length; i++){
box[i].style.zIndex = z;
}
z = 9;
for (var i=picIx+1; i<box.length; i++){
box[i].style.zIndex = z;
z = z - 1;
}
}

function init(){
box = document.getElementById("pics").getElementsByTagName("div");
for (var i=0; i<box.length; i++){
box[i].style.right = 60*i+"px";
}
picIx = 0;
showPict();
}

/*function updatePic(){
box[picIx].style.zIndex = 10;
var z = 9;
for (var i=picIx+1; i<box.length; i++){
box[i].style.zIndex = z;
}
z = 9;
for (var i=picIx+1; i<box.length; i++){
box[i].style.zIndex = z;
z = z - 1;
}
}*/


</script>
</head>
<body onload="init();">
<div id="pics">
<h1> SOMMARENS BILDER </h1>
<div id="55"onmouseover="showPict(true, 0);" onmouseout="showPict(false, 0);">
<img id="image1" src="pics/butterfly_small0.jpg" alt="En fjäril." />
<div id="BigPic0" class="box"><img src="pics/butterfly.jpg" alt="En fjäril." width="200px" height="150px" />
<form name="xbox" action="">
<label>
<p id="picText1"></p>
<input type="checkbox" />
</label>
</form>
</div>
</div>
<div id="11" onmouseover="showPict(true, 1);" onmouseout="showPict(false, 1);">
<img id="image2" src="pics/boats_small0.jpg" alt="Båtar vid stranden." />
<div id="BigPic1" class="box"><img src="pics/boats.jpg" alt="Båtar vid stranden." width="200px" height="150px" />
<form name="xbox" action="">
<label><p id="picText2"></p>
<input type="checkbox" />
</label>
</form>
</div>
</div>
<div id="22" onmouseover="showPict(true, 2);" onmouseout="showPict(false, 2);">
<img id="image3" src="pics/church_small0.jpg" alt="Spansk kyrka." />
<div id="BigPic2" class="box"><img src="pics/church.jpg" alt="Spansk kyrka." width="200px" height="150px" />
<form name="xbox" action="">
<label><p id="picText3"></p>
<input type="checkbox" />
</label>
</form>
</div>
</div>
<div id="33" onmouseover="showPict(true, 3);" onmouseout="showPict(false, 3);">
<img id="image4" src="pics/flower_small0.jpg" alt="Somrig blomma." />
<div id="BigPic3" class="box"><img src="pics/flower.jpg" alt="Somrig blomma." width="200px" height="150px" />
<form name="xbox" action="">
<label><p id="picText4"></p>
<input type="checkbox" />
</label>
</form>
</div>
</div>
<div id="44"onmouseover="showPict(true, 4);" onmouseout="showPict(false, 4);">
<img id="image5" src="pics/glass_small0.jpg" alt="Snart ett nytt glas." />
<div id="BigPic4" class="box"><img src="pics/glass.jpg" alt="Snart ett nytt glas." width="200px" height="150px" />
<form name="xbox" action="">
<label><p id="picText5"></p>
<input type="checkbox" />
</label>
</form>
</div>
</div>
<p />
<input type="button" value="Visa bildspel" onclick="">

</div>
</body>
</html>

Postat av Ulrika (83.188.194.153) den 02 Maj, 2011 kl 21:31:01.


Svar på inlägget:

Posta ett svar:

Namn:
E-Mail:
Rubrik:
Meddelande:
Ja tack, maila mig om andra svarar på detta inlägg.
Ja tack, maila mig om andra svarar på mitt inlägg.

[ JavaScript.nu's Forum ] [ Viktigt om forumet ] [ JavaScript.nu's Startsida ]



Copyright © Omid Rouhani 1997-2022; Alla rättigheter reserverade.
Guider: [ HTML guide ] - [ JavaScript guide ] - [ DHTML guide ] - [ Perl guide ] - [ Sitemap ]