Bilder mit OnMouseOver vergrössern

[Alex]

Ich habe eine Projekt wo ganz viele Bilder (10x10 Pixel) nebeneinander und untereinander angeordnet sind... wie ein Teppich. Ich will jetzt, wenn man über eines der Bilder geht, dass es dann größer wird... einfach indem das width und height Attribut geändert wird.

ist soweit kein Problem mit:

<img src="blabla" onMouseOver="width=20; height=20" onMouseOut="width=10; height=10">

Allerdings verschieben sich jetzt logischerweise auch alle Bilder außenherum und ich bekomme leere Zeilen in meinem "Teppich".
Das soll natürlich nicht sein. Das Bild soll praktisch größer werden und alle anderen Bilder außenherum verdecken.

Hat jemand ne Idee?

Oder lässt sich mir einem onMouseOver eine CSS-Klasse von einem DIV ändern. Darüber habe ich auch noch nix gefunden.

z.B irgendwie so:
<div class="klein" onMouseOver="class='gross'" onMouseOut="class='klein'">

Danke, Alex

[wahsaga]

hi,

Allerdings verschieben sich jetzt logischerweise auch alle Bilder außenherum und ich bekomme leere Zeilen in meinem "Teppich".
Das soll natürlich nicht sein. Das Bild soll praktisch größer werden und alle anderen Bilder außenherum verdecken.

Hat jemand ne Idee?

Wenn du diese logische Konsequenz deines Vorgehens unterbinden willst, dann müsstest du schon dynamisch weitere CSS-Attribute deines Bildes ändern - z.B. position/top/left und margin, o.ä.

Oder lässt sich mir einem onMouseOver eine CSS-Klasse von einem DIV ändern. Darüber habe ich auch noch nix gefunden.

Natürlich geht das - aber nicht über class, sondern über className.

gruß,
wahsaga

[Alexander Kern]

OK, soweit sogut...
ich habe jetzt vor des IMG einfach ein DIV(.PIXEL) und einen href="#" gesetzt und im CSS einen .PIXEL a:hover angelegt.

Aber sehr viel weiter bringt mich das nun auch nicht.

.PIXEL {
 background-color: #00FFFF;
 float:left;
}
.PIXEL a:hover {
 background-color: #00FFFF;
 float:left;
 position: relative;
 height: 20px;
 width: 20px;
}

Damit bekomme ich auch meine weissen Zeilen.
Was sollte ich nun mit top, left, margin, padding etc. einstellen? Mit Rumprobieren ab ich noch nichts Gescheites erreicht.

Danke erstmal, Alex

hi,

Allerdings verschieben sich jetzt logischerweise auch alle Bilder außenherum und ich bekomme leere Zeilen in meinem "Teppich".
Das soll natürlich nicht sein. Das Bild soll praktisch größer werden und alle anderen Bilder außenherum verdecken.

Hat jemand ne Idee?

Wenn du diese logische Konsequenz deines Vorgehens unterbinden willst, dann müsstest du schon dynamisch weitere CSS-Attribute deines Bildes ändern - z.B. position/top/left und margin, o.ä.

Oder lässt sich mir einem onMouseOver eine CSS-Klasse von einem DIV ändern. Darüber habe ich auch noch nix gefunden.

Natürlich geht das - aber nicht über class, sondern über className.

gruß,
wahsaga

[MichaL]

<img src="blabla" onMouseOver="width=20; height=20" onMouseOut="width=10; height=10">

Allerdings verschieben sich jetzt logischerweise auch alle Bilder

Hallo,

das Bild befindet sich im Text, also muss sich alles verschieben. Wenn das nicht sein soll, musst du das grosse Bild in einen div tun, der zuerst nicht angezeigt wird (display:none) und beim hovern angezeigt und positioniert wird, evtl. auch einige z-Ebenen höher. Dabei muss die Positionierung für IE und normale Browser unterschiedlich sein.
Irgendwie kann man das mit onMouseOver und Script machen, bin aber kein Scripter.
Ohne Script geht es, weil der IE nicht div's hovern kann, ersatzmäßig über links. Wenn dir meine InfoBox Lösung gefällt, kann ich sie dir geben.

Michael

[Alexander Kern]

Ah danke... das mit dem Display:None klingt spannend... ich werde mich mal dranmachen.

Gruß, Alex

Hallo,

das Bild befindet sich im Text, also muss sich alles verschieben. Wenn das nicht sein soll, musst du das grosse Bild in einen div tun, der zuerst nicht angezeigt wird (display:none) und beim hovern angezeigt und positioniert wird, evtl. auch einige z-Ebenen höher. Dabei muss die Positionierung für IE und normale Browser unterschiedlich sein.
Irgendwie kann man das mit onMouseOver und Script machen, bin aber kein Scripter.
Ohne Script geht es, weil der IE nicht div's hovern kann, ersatzmäßig über links. Wenn dir meine InfoBox Lösung gefällt, kann ich sie dir geben.

Michael

[Alexander Kern]

OK... Hat perfekt funktioniert.
Hier mein Code - für den, den es interessiert.

<script language="JavaScript" type="text/javascript">
<!--
function offDiv(element){
    document.getElementById(element).style.display = 'none';
}

function onDiv(element) {
 document.getElementById(element).style.display = 'block';
}
//-->
</script>

<!-- x1.jpg ist 10px x 10px -->

<div style=" position:relative; padding:30px; height:50px; width:50px; background-color:#00FF00">

<div style="position:relative; float:left"><img src="pics/x1.jpg" onMouseOver="onDiv('1');" onMouseOut="offDiv('1');">
 <div id="1" style="display:none; position:absolute; top:10px; left:10px;"><img src="pics/x1.jpg" width="30" height="30"></div>
</div>
<div style="position:relative; float:left"><img src="pics/x1.jpg" onMouseOver="onDiv('2');" onMouseOut="offDiv('2');">
 <div id="2" style="display:none; position:absolute; top:10px; left:10px;"><img src="pics/x1.jpg" width="30" height="30"></div>
</div>
<div style="position:relative; float:left"><img src="pics/x1.jpg" onMouseOver="onDiv('3');" onMouseOut="offDiv('3');">
 <div id="3" style="display:none; position:absolute; top:10px; left:10px;"><img src="pics/x1.jpg" width="30" height="30"></div>
</div>

</div>