Antworten zu häufig gestellten Homepage-Fragen
 Alle Anleitungen
Einige Anleitungen
Intern
Kostenl. Partnerlinks
[,__,] Druckversion
FAQs zu Homepage & Co.
Bilder vergrössern bei Mouseover (Überfahren mit der Maus)
(Beitrag komplett erneuert im Januar 2007)

Inhalt:

- Bild direkt vergrössern (mit Javascript)

Bild direkt vergrössern (ohne Javascript)

Vergrössertes Bild im Infosfenster/-box (ohne Javascript)

Vergrössertes Bild in der Infoxbox/-fenster (mit Javascript)


A) Bild direkt vergrössern mit Javascript

Demo: http://www.homepage-faqs.de/1-test-m...sern/test.html

Der Code ist einfach, allerdings muss Javascript muss aktiviert sein.

HTML-Code:
<html> 
<head>
<title></title>
</head>
<body>
<img onmouseover="(src='bild1gross.jpg')" onmouseout="(src='bild1klein.jpg')" src="bild1klein.jpg" alt="" border="0">
<img onmouseover="(src='bild2gross.jpg')" onmouseout="(src='bild2klein.jpg')" src="bild2klein.jpg" alt="" border="0">
<img onmouseover="(src='bild3gross.jpg')" onmouseout="(src='bild3klein.jpg')" src="bild3klein.jpg" alt="" border="0">
</body>
</html>
Hinweis: Allerdings ist das Verschieben der anderen Bilder (des Designs) noch ein Problem.


B) Bild direkt vergrössern ohne Javascript

Demo:
http://www.homepage-faqs.de/1-test-m...ern/test2.html

HTML-Code:
<html> 
<head>
<title></title>
<style>
a.bild1 { display:block; background-image:url(bild1klein.jpg); width:200px; height:149px }
a.bild1:hover { background-image:url(bild1gross.jpg); width:410px; height:307px }
a.bild2 { display:block; background-image:url(bild2klein.jpg); width:200px; height:149px }
a.bild2:hover { background-image:url(bild2gross.jpg); width:410px; height:307px }
a.bild3 { display:block; background-image:url(bild3klein.jpg); width:200px; height:149px }
a.bild3:hover { background-image:url(bild3gross.jpg); width:410px; height:307px }
</style>
</head>
<body>
<a class="bild1" href="#"></a><br>
<a class="bild2" href="#"></a><br>
<a class="bild3" href="#"></a><br>
</body>
</html>
Hinweis: Das Problem mit dem Veschieben der Bilder (des Designs) bleibt.


C) Vergrössertes Bild im Infosfenster (ohne Javascript)

Bei Mouseover wird neben dem kleinen Bild das vergrösserte Bild angezeigt, bei den kleinen Bildern gibts damit keine Verschiebungen

Demo: 
http://www.homepage-faqs.de/1-test-m...ern/test3.html (wie im Code unten)

Demo 3b: http://www.homepage-faqs.de/1-test-mouseover-bild-vergroessern/test3b.html

(Hier ist der Bildabstand grösser, Text unter einem Bild und die Position der grossen Bilder ist vom linken Rand aus angegeben)


HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Infobox</title>
<style type="text/css">
<!--
img {
border:none;
}

#box{
height:149px;
width:200px;
padding:0;
margin:20px;
font:bold 14px verdana, sans-serif;}

#box div{display:none;}

#box:hover div{
display:block;
width:300px;
position:absolute;top:20px;right:20px;
padding:15px;
font:normal 14px verdana, sans-serif;}
-->

</style>
</head>
<body>

<div id="box">
<a href="#"><img src="bild1klein.jpg" width="200" height="149" alt="bild"></a>
<div><p><img src="bild1gross.jpg" width="410" height="307" alt=""></p></div>
</div>

<div id="box">
<a href="#"><img src="bild2klein.jpg" width="200" height="149" alt="bild"></a>
<div><p><img src="bild2gross.jpg" width="410" height="307" alt=""></p></div>
</div>

<div id="box">
<a href="#"><img src="bild3klein.jpg" width="200" height="149" alt="bild"></a>
<div><p><img src="bild3gross.jpg" width="410" height="307" alt=""></p></div>
</div>

</body>
</html>
Quelle: http://aktuell.de.selfhtml.org/artikel/css/infobox/

Wichtig: Der Doctype muss dabei sein, sonst gehts im IE7 nicht.


D) Vergrössertes Bild in Infoxbox (mit Javascript), siehe

Javascript - bei Mouseover Hinweisfenster, auch mit Bildern oder als Bildervorschau


Siehe auch

Bildergalerien auf der eigenen Webseite (Übersicht)

Bildergalerien, auch mit Effekten, z.T. in CSS, mit und ohne Javascript

Anleitung (C) 2007 Daniel Wurst - http://www.homepage-faqs.de