OnMouseOver

Jag håller på med ett litet bildgalleri och då vill jag att bilderna ska förstoras när man för muspekaren över bilden.

Då satt jag och läste lite på webdesignskolan.com och där fanns det en OnMouseOver grej som skulle funka ganska bra.

http://www.webdesignskolan.com/javascripts/mouseover2.htm

Jag satt och kollade och förstod det mesta men längst ner står det :

"Dessutom måste du ha en transparent GIF-bild, som "håller plats" åt den bild som skall synas när musmarkören förs över en meny. I exemplet ovan är det 3st. (3 olika platser där bilderna "dyker upp") De har samma storlek som bilden som tar deras plats när de syns. I det här exemplet heter de: popup1_blank.gif, popup2_blank.gif och popup3_blank.gif"

Är det bara jag som inte förstår vad som menas? :)

Re: OnMouseOver

AboO skrev:

Är det bara jag som inte förstår vad som menas? :)

Antagligen. :)

Vad är det du inte förstår?

mvh

Det verkar onödigt att lägga in transparenta bilder som "platshållare".

Om man leker med visibility: hidden slipper man de genomskinliga bilderna.

Är det så att det visas en transparent bild när man inte har musen över bilden? och när man för musen över bilden så byts den transparenta bilden ut? Är det så?

AboO skrev:

Är det så att det visas en transparent bild när man inte har musen över bilden? och när man för musen över bilden så byts den transparenta bilden ut? Är det så?

Exakt, och det är det jag tycker är dumt.

Det kan istället göras så här:

<script type="text/javascript">
document.writeln('<style type="text/css">');
document.writeln('.rollImg { visibility: hidden; }');
document.writeln('</style>');

function show(imgId){
   document.getElementById(imgId).style.visibility = "visible";
}

function hide(imgId){
   document.getElementById(imgId).style.visibility = "hidden";
}
</script>

...

<p>
<button onmouseover="show('bild1')" onmouseout="hide('bild1')">Bild 1</button>
<button onmouseover="show('bild2')" onmouseout="hide('bild2')">Bild 2</button>
<button onmouseover="show('bild3')" onmouseout="hide('bild3')">Bild 3</button>
</p>

<p>
<img src="img1.png" id="bild1" class="rollImg" />
<img src="img2.png" id="bild2" class="rollImg" />
<img src="bg.png" id="bild3" class="rollImg" />
</p>

Ja, det där verkar funka rätt så bra. :)
Tackar.