• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bildgröße bei Onmouseover

Status
Für weitere Antworten geschlossen.
M

magifix

Neues Mitglied
Kann mir jemand bitte sagen wie man die Bildgröße mit Onmousover ändert

nachfolgender Codeschnipsel geht nicht

das Bild bleibt unverändert

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html;charset=ISO-8859-15"
http-equiv="Content-Type">
<title>test01</title>
<style type="text/css" img="" {="" width:="" 100px;="" height:=""
200px;="" }=""></style>
<script type="text/javascript">
function bildgross() {
var dasbild = document.getElement.ById('bild');
dasbild.style.height='500px';
dasbild.style.width='250px';

}
function bildklein() {
var dasbild = document.getElement.ById('bild');
dasbild.style.height='100px';
dasbild.style.width='150px';
}
</script>
</head>
<body>
Bilder test<br>
<img src="test.jpg" alt="test" id='bild' onmouseover="bildgross();"
onmouseout="bildklein();"><br>

</body>
</html>
 
Werbung:
Sollte aber funktionieren wenn Du mal diesen Fehler hier beseitigst:

Code: 
<style type="text/css" img="" {="" width:="" 100px;="" height:=""
 200px;="" }=""></style>
 
Habe den code wie folgt korrigiert

das war ea aber auch nicht


<style type="text/css">
img {
width: 100px;
height: 200px;
}

</style>
 
Werbung:
Werbung:
Hallo,

habe nun eine Lösung gefunden die im Firefox funktioniert.
bei mouseover wird das bild größer und bei mouseout kleiner
der Explorer geht leider (wider mal) nicht
da springt die Größe
hat hat jemand zufällig eine Lösung?


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html;charset=ISO-8859-15"
http-equiv="Content-Type">
<title>test01</title>

</head>
<body>




<script>

function resize(field, size) {
field.style.width = size;
field.style.height = size;
if (size < 150) {
size += 5;
window.setTimeout(resize, 35, field, size);
}
}
</script>
<script>
function resize2(field, size) {
field.style.width = size;
field.style.height = size;
if (size > 70) {
size -= 5;
window.setTimeout(resize2, 35, field, size);
}
}

</script>


<img src="bilder/test.jpg" id="pic0" name="pic0"
alt="Titel des Bildes" onmouseover="resize(this, 100)"
onmouseout="resize2(this, 150)" height="70" width="70">
</body>
</html>
 
Für den Explorer muss man imho auch die Einheiten an die Werte anhängen. Also statt

Code: 
field.style.width = size;

sollte

Code: 
field.style.width = size + "px";

jeweils stehen.
 
Im standardmode würde das im Firefox auch in der Fehlerkonsole stehen. Das Problem ist aber ein anderes, die Verwendung von setTimeout ist falsch. Ausserdem ist der Ansatz gefährlich, mouseover und out können sich hier überschneiden und dabei zu einer Endlosschleife führen.
 
Werbung:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben