D3 Geschrieben 24. Januar 2006 Geschrieben 24. Januar 2006 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 Zitieren
tobias-digital Geschrieben 24. Januar 2006 Geschrieben 24. Januar 2006 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 Zitieren
D3 Geschrieben 24. Januar 2006 Autor Geschrieben 24. Januar 2006 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 ?! Zitieren
D3 Geschrieben 25. Januar 2006 Autor Geschrieben 25. Januar 2006 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 ?! Zitieren
tobias-digital Geschrieben 25. Januar 2006 Geschrieben 25. Januar 2006 Vielleicht hast Du für alle Bilder die selbe id vergeben? Zitieren
geloescht_JesterDay Geschrieben 25. Januar 2006 Geschrieben 25. Januar 2006 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). Zitieren
Empfohlene Beiträge
Dein Kommentar
Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.