Seite mit vielen Bildern

D

Darter

Mitglied
Moin

Ich möchte einfach eine Seite machen auf der segr viele bilder drauf sind. wenn ich nunu mit der Maus über das Bild fahre soll das bild etwas größer angezeig werden. Aber die position der anderen Bildern nicht verändern also sozusagen ein neues kleines fenter aufgehen indem mein bild ist. also ich meine kein neues browser fenster ondern eben so ein jave teil. ich kenn mich da nicht so aus :-(

ich hab grad nochmal gesucht und glaube so was ähnliches gefunden eben nur mit einem link und ich hätte das ganze gerne wenn ich über ein bild fahre

Code: 
<html>

<head>
<title>Meine Homepage</title>
<style type="text/css">

a.info span
{display: none;}

a.info:hover span
{display:block;
position:absolute;
top:2em;
left:2em;}

</style>
<h5>Thema XY</h5>
<a class="info" href="#">Beim Drüberfahren erschein ein Bild<span>
<img src="meinBild.jpg" width="250" height="200" border="0" alt="Bild"></span></a>

</html>



Danke schonmal
 
Zuletzt bearbeitet:
Moin,
Darter hat gesagt.:
ich hab grad nochmal gesucht und glaube so was ähnliches gefunden eben nur mit einem link und ich hätte das ganze gerne wenn ich über ein bild fahre

Code: 
<a class="info" href="#">Beim Drüberfahren erschein ein Bild<span>
<img src="meinBild.jpg" width="250" height="200" border="0" alt="Bild"></span></a>
Zum Vergrößern anklicken....
Dann ersetze in dem Code die Linkbeschreibung "Beim Drüberfahren erschein ein Bild" durch ein <img>-Element:

HTML: 
<a class="info" href="#"><img src="meinBild_thumb.jpg" alt="Bild"><span>
<img src="meinBild.jpg" width="250" height="200" border="0" alt="Bild"></span></a>
CSS: 
a.info img {
    border:none;
}
a.info span {
    display:none;
}
a.info:hover span {
    display:block;
    position:absolute;
    top:2em;
    left:2em;
}

Ansonsten hast du auch die Möglichkeit, das Markup auf eine andere Weise auszuzeichnen, falls du keinen Link nutzen möchtest:

HTML: 
<ul class="gallery">
    <li><img src="meinBild_1_thumb.jpg" alt="Bild 1"><span><img src="meinBild_1.jpg" width="250" height="200" border="0" alt="Bild 1"></span></li>
    <li><img src="meinBild_2_thumb.jpg" alt="Bild 2"><span><img src="meinBild_2.jpg" width="250" height="200" border="0" alt="Bild 2"></span></li>
</ul>
CSS: 
.gallery {
    margin:0;
    padding:0;
    list-style:none;
}
.gallery li span {
    display:none;
}
.gallery li:hover span {
    display:block;
    position:absolute;
    top:2em;
    left:2em;
}

mfg Maik
 
Dann hast du es entweder im veralteten IE6 versucht, der die :hover-Pseudoklasse ausschließlich für das <a>-Element interpretiert, oder dein HTML-Dokument, wie in deinem eingangs gezeigten Code, ohne Doctype-Deklaration versehen, womit alle Browser in den "Quirks Mode" schalten, und der IE7 u. IE8 sich in diesem Darstellungsmodus wie der IE6 verhalten, obwohl sie es im standardkonformen Modus besser können.

In allen übrigen Browsern funktioniert die zweite Methode unabhängig vom Darstellungsmodus einwandfrei, und mit diesem Code auch in der IE-Familie:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="Maik" />
<meta name="date" content="2010-02-11" />

<title>tutorials.de | Demo Darter</title>

<style type="text/css">
/* <![CDATA[ */
.gallery {
    margin:0;
    padding:0;
    list-style:none;
}
.gallery li span {
    display:none;
}
.gallery li:hover span {
    display:block;
    position:absolute;
    top:2em;
    left:2em;
}
/* ]]> */
</style>

<!-- Für IE6 -->
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js"></script>
<![endif]-->
<!-- Ende für IE6 -->

</head>
<body>

<ul class="gallery">
    <li><img src="meinBild_1_thumb.jpg" alt="Bild 1" /><span><img src="meinBild_1.jpg" width="250" height="200"  alt="Bild 1" /></span></li>
    <li><img src="meinBild_2_thumb.jpg" alt="Bild 2" /><span><img src="meinBild_2.jpg" width="250" height="200"  alt="Bild 2" /></span></li>
</ul>

</body>
</html>

Und achte doch bitte auf unsere Netiquette bzgl. der erwünschten Groß- und Kleinschreibung - vielen Dank! :)

mfg Maik
 
Naja jetzt kommt das Bild in groß nur leider kommt es auch dann, wenn ich mit der Maus viel weiter rechts von meinem Bild bin bzw. es kommt über die koplette beite der Seite..
 
Zuletzt bearbeitet:
Formatier das <ul>-Element zusätzlich mit float:left, damit es sich, für ein "Block-Element" typisch, nicht über die komplette Breite seines Anzeigebereichs ausstreckt, sondern sich die Breite aus seinem Inhalt, hier den erstgenannten <img>-Elementen, ergibt.

Je nach Konstellation des vollständigen Seitenlayouts ist anschliessend die clear:left-Regel vonnöten, um den rechtsseitigen Umfluß des Elements abzubrechen.

mfg Maik
 
Ok das geht. Aber was ist nun, wenn ich mehrere Bilder hintereinander setzen will.
Wie mein Titel ja eig. schon sagt möchte ich eine Seite machen auf der nun Bilder sind also bild an Bild, und wenn ich eben über die Bilder fahre sollen diese, wie es ja oben schon klappt, nochmal in Größ erscheinen.
 
Zuletzt bearbeitet:
Hintereinander...

  • Interpretation:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="Maik" />
<meta name="date" content="2010-02-11" />

<title>tutorials.de | Demo Darter</title>

<style type="text/css">
/* <![CDATA[ */
.gallery {
    margin:0;
    padding:0;
    list-style:none;
    float:left;
}
.gallery li {
    display:inline;
}
.gallery li span {
    display:none;
}
.gallery li:hover span {
    display:block;
    position:absolute;
    top:2em;
    left:2em;
}
/* ]]> */
</style>

<!-- Für IE6 -->
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js"></script>
<![endif]-->
<!-- Ende für IE6 -->

</head>
<body>

<ul class="gallery">
    <li><img src="meinBild_1_thumb.jpg" alt="Bild 1" /><span><img src="meinBild_1.jpg" width="250" height="200"  alt="Bild 1" /></span></li>
    <li><img src="meinBild_2_thumb.jpg" alt="Bild 2" /><span><img src="meinBild_2.jpg" width="250" height="200"  alt="Bild 2" /></span></li>
    <li><img src="meinBild_3_thumb.jpg" alt="Bild 3" /><span><img src="meinBild_3.jpg" width="250" height="200"  alt="Bild 3" /></span></li>
    <li><img src="meinBild_4_thumb.jpg" alt="Bild 4" /><span><img src="meinBild_4.jpg" width="250" height="200"  alt="Bild 4" /></span></li>
</ul>

</body>
</html>
  • Interpretation:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="Maik" />
<meta name="date" content="2010-02-11" />

<title>tutorials.de | Demo Darter</title>

<style type="text/css">
/* <![CDATA[ */
.gallery {
    margin:0;
    padding:0;
    list-style:none;
    float:left;
}
.gallery li span {
    display:none;
}
.gallery li:hover span {
    display:block;
    position:absolute;
    top:2em;
    left:2em;
}
/* ]]> */
</style>

<!-- Für IE6 -->
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js"></script>
<![endif]-->
<!-- Ende für IE6 -->

</head>
<body>

<ul class="gallery">
    <li><img src="meinBild_1_thumb.jpg" alt="Bild 1" /><span><img src="meinBild_1.jpg" width="250" height="200"  alt="Bild 1" /></span></li>
    <li><img src="meinBild_2_thumb.jpg" alt="Bild 2" /><span><img src="meinBild_2.jpg" width="250" height="200"  alt="Bild 2" /></span></li>
</ul>
<ul class="gallery">
    <li><img src="meinBild_3_thumb.jpg" alt="Bild 3" /><span><img src="meinBild_3.jpg" width="250" height="200"  alt="Bild 3" /></span></li>
    <li><img src="meinBild_4_thumb.jpg" alt="Bild 4" /><span><img src="meinBild_4.jpg" width="250" height="200"  alt="Bild 4" /></span></li>
</ul>

</body>
</html>

mfg Maik
 
Gut thx das geht schonmal. Nur jetzt zeigt es ja das vergrößerte Bild immer links an. Kann man da auch was machen, dass es das vergrößerte Bild immer ein stück weiter recht von dem kleinen Bild oder etwas darunter anzeigt?
 
Ich geh jetzt einfach mal davon aus, dass wir hier von meiner ersten Interpretation reden :)

CSS: 
.gallery li {
    display:inline;
    position:relative; /* absolute Positionsangaben verhalten sich darin relativ, beziehen sich auf dieses Element, und nicht auf <body>  */
}


mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück