✔ mouseover hover Bild von klein nach gross

A

amberrachel

Mitglied
Hallo Leute,
ich habe erst angefangen mich mit Html und Css zu beschäftigen.
durch das das ich für eine Firma eine webseite erstellen sollte.
Im grossen und ganzen geht es super voran, wenn nur nicht diese Anfrage wäre...
Ich bin schon seint zwei tagen darn um das Problem zu lösen kome aber auf keinen grüne Punkt.
also der Kunde möchte gerne das man das bild wen man darüber fährt mit der Maus sich vegrössert. er will aber keine JavaSkripts auf seine Webseite.
Das ganze muss in einem Tabelen element sein. Da meine aufteilung in Tabelen eingeteilt sind....
nehem wir an das Bild heist machine.jpg und daneben sollte Machine 1 stehen. dies solte in class Text einegebunden werden.
Ich danke herzlich für eure hilfe
MfG Rahel :-)
Hier mein Html body Text

<body bgcolor="#dddddd">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">

<tr>
<td><img src="kornfeld.jpg" alt="Kornfeldbr&uuml;cke" width=200 height=140/> </td>
<td><p class="kopfleiste"> Br&uuml;cken schlagen bedeutet auch in die<br>
Zukunft schauen, damit die Idee eines<br>
Projektes eine sichere Zukunft hat! </p>
</a></td>
</tr>
<tr>
<td colspan="2" align=center> <br><h1>Willkomen </h1> </td>

</tr>
<tr>
<td colspan="2" align=center> <h3>HOCHWERTIG + SICHER</h3> </td>

</tr>
<tr>
<td colspan="2"><p class= "text"> Text oder Bilder </p>
<p class="fussleiste">&copy; 2010 </p>
</td>
</tr>
</table>


</body>
</html>
 
Hi,

vom Grundprinzip her funktioniert in CSS die Vergrößerung eines Bildes beim Überfahren so:
CSS: 
img { 
    display:block;
    width:50px;
    height:50px;
}
img:hover {
    width:300px;
    height:300px;
}

Es werden damit keine zwei Bilddateien benötigt, sondern einfach das große Bild (hier: 300x300px) mit dem ersten Regelblock herunterskaliert.

mfg Maik
 
Hi danke
habe es versucht aber bekomme nur ein verkleinertes bild
es tut sich nchts dabei

kommt es darauf an welchen Doctype ich habe?
oder wieso hat e sncht geklapt?

lg Rahel
 
Der Doctype spielt hierbei in den standardkonformen Browsern keine Rolle, es sei denn, du versuchst es im IE.

mfg Maik
 
Hi :-)

ja es müshte eher für IE gehen :-/
da die meisten Kunden IE haben

es wäre sosnt auch schon gut wenn man sosnt drauf klicken kan und es wenig grösser wird und wider wen man weg geht es klein ist...
muss dan einefach den Kunden überzeugen das die die besser Lösung ist ;-)

lg
Rahel


hmm könnte es auch sein weil es in eine table drin ist?
 
Zuletzt bearbeitet:
Mit Blick auf den IE7 und IE8 ist es zwingend erforderlich, das HTML-Dokument mit dem entsprechenden Doctype den Browsern im standardkonformen Modus zu übergeben, da sie sich ansonsten im Darstellungsmodus "Quirks Mode" wie der IE6 verhalten, der den Selektor img:hover nicht interpretiert. Er kennt nämlich in der Liste der HTML-Elemente nur a:hover.

Dies hier wäre eine mögliche Dokumenttyp-Deklaration für den "Almost Standards Mode":
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">


Wenn der IE6 ebenso zu berücksichtigen ist, und die Seite kein JS nutzen soll / darf, um seine Mangelerscheinungen mittels http://code.google.com/p/ie7-js/ auszugleichen, müsste das Grafikelement eben in ein <a>-Element eingebunden werden.

HTML: 
<a href="#"><img ...></a>
CSS: 
a img {
    display:block;
    width:50px;
    height:50px;
    border:none;
}
a:hover {  /* Für IE6 */
    border:none;
}
a:hover img {
    width:300px;
    height:300px;
}

Wenn das Bild beim Anklicken vergrößert werden soll, lautet das CSS entsprechend so:
CSS: 
a img {
    display:block;
    width:50px;
    height:50px;
    border:none;
}
a:active { /* Für IE6 */
    border:none;
}
a:focus img,
a:active img {
    width:300px;
    height:300px;
}

mfg Maik
 
danke vielmals dies klapt nun d
och mein bild oben dass sich nicht verändern dürte hat sich nun auch verändert..
kan ich das korigieren uin dem ich den Bilder wleche ich hover eine class zuordne?
lg
rahl
 
Jo, mit der Angabe eines Klassenbezeichners kannst du die CSS-Regeln im HTML-Dokument spezifizieren, und so die übrigen Grafiken von dieser Formatierung ausschließen.

HTML: 
<a href="#"><img class="hoverClass" ...></a>
CSS: 
a img.hoverClass {
    display:block;
    width:50px;
    height:50px;
    border:none;
}
a:hover { /* Für IE6 */
    border:none;
}
a:hover img.hoverClass {
    width:300px;
    height:300px;
}

mfg Maik
 
mega Dank,
so einfahc ist es und ich suchte so kompliziert,
nun nächstes mal suche ich mir gleich hilfen als das ich 2 Tage ver gehen lasse
nochmals vielen danke und gute nacht :-)


Lg Rahle
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück