Veröffentlicht 24. Januar 200619 j Wie kann ich per Mouseover eine Bildgröße ändern. SPrich ich habe auf einer HTML Page ein BIld eingefügt das meinetwegen 100x200 ist. Sobald der Mauszeiger drüber ist würde ich das gerne auf zB 250x500 vergrößern. mfg D3
24. Januar 200619 j Hi! Wie wär's denn hiermit: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de"> <head> <title>Testbild</title> <style type="text/css"> img { width: 100px; height: 200px; } </style> <script type="text/javascript"> function machGross() { var dasBild = document.getElementById('bild'); dasBild.style.height = '500px'; dasBild.style.width = '250px'; } function machKlein() { var dasBild = document.getElementById('bild'); dasBild.style.height = '200px'; dasBild.style.width = '100px'; } </script> </head> <body> <img src="bild.jpg" alt="Testbild" id="bild" onmouseover="machGross();" onmouseout="machKlein();" /> </body> </html> Grüße, Tobias
24. Januar 200619 j mhmm .. der Ansatz klingt gut und funktioniert auch soweit . Nur sind jetzt auf der entsprechenden HTML Seite alle Bilder auf 150x200 oder was das war vergrößert worden. Wie kann ich das verhindern ? Das werde ich wahrscheinlich irgendwie mit einer externen CSS machen müssen in die ich das : <style type="text/css"> img { width: 100px; height: 200px; } </style> Reinpacke ... oder liege ich da falsch ?!
25. Januar 200619 j Nun habe ich festgestellt , dass das bei mehreren BIlder gar nicht mehr funktioniert . Da resized er immer das gleiche (erste) Bild egal über welches der Bilder ich gerade mit der Maus gehe ! Kann mir da jemand helfen ?!
25. Januar 200619 j Der code von Tobias etwas abgeändert: # styles.css .klein { width: 100px; height: 200px; } .gross { width: 250px; height: 500px; } # HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de"> <head> <title>Testbild</title> <link rel="stylesheet" type="text/css" href="styles.css" /> <script type="text/javascript"> function machGross(aID) { var dasBild = document.getElementById(aID); dasBild.className = 'gross'; } function machKlein(aID) { var dasBild = document.getElementById(aID); dasBild.className = 'klein'; } </script> </head> <body> <img src="bild1.jpg" alt="Testbild" id="bild1" onmouseover="machGross(this.id);" onmouseout="machKlein(this.id);" /> <br /> <img src="bild2.jpg" alt="Testbild" id="bild2" onmouseover="machGross(this.id);" onmouseout="machKlein(this.id);" /> </body> </html> Und jedem Bild ne eigene ID geben (eine ID darf nach Standard eh nur einmal vorhanden sein im Dokument).
Archiv
Dieses Thema wurde archiviert und kann nicht mehr beantwortet werden.