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

Frage zum Coding!

Status
Für weitere Antworten geschlossen.
E

EzahMedia

Neues Mitglied
Guten Tag Community...
Bin ganz neu im Forum und hoffe ihr könnt mir bei meiner Frage behilflich sein...
Also es geht um folgendes... Ich designe grade eine Website neu und möchte das wenn man mit Mauszeiger über ein Bild "rollt" das ein kleines Fenster aufgeht und das Foto darin größer angezeigt wird.... Quasi ohne draufklicken! Habs schon öfters gesehen und möchte das gerne auch nun verwenden...

Weiß einer wies geht?

MfG
 
wow genau das meine ich :) und die anleitung scheint auch sehr deutlich zu sein :) vielen dank!

hmmm jetz habe ich ein problem

ich habe jetz diesen code hier mit meinen daten
PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div id="galerie">

<ul>
<li><img src="boys1klein1.jpg" alt="Rose 1">Rose 1</li>
<li><img src="boys1klein2.jpg" alt="Rose 2">Rose 2</li>
</ul>
</div>
<div style="clear: both;">
</div>
</body>
</html>
wo muss ich das nun einfügen??

#galerie li
{
list-style-type: none;
float: left;
margin: 0 10px 10px 0;
text-align: center;
font-weight: bold;
}

#galerie img
{
width: 150px;
height: 150px;
display: block;
padding: 3px;
border: 1px solid #8B0000;
}
 
Zuletzt bearbeitet von einem Moderator:
Da gibt es mehrere Möglichkeiten.
a) Du erstellst eine externe CSS Datei: mit dem Texteditor, Dateiendung: .css; diese speicherst du im selben Verzeichnis wie deine HTML-Datei und fügst in den head folgendes ein:
HTML: 
<link rel="stylesheet" type="text/css" href="style.css">
(Wobei style.css der Name deiner CSS-Datei ist)
b)Du fügst den CSS Code direkt in die HTML-Datei ein, das geht so:
HTML: 
<head>
<style type="text/css">
<!--dein CSS Code-->
</style>
<!--title, meta-tags usw.-->
</head>

Gibt noch mehr, ich empfehle dir aber a)
 
Zum Beispiel hier (rot):

<title>Untitled Document</title>

<style type="text/css">
#galerie li
{
list-style-type: none;
float: left;
margin: 0 10px 10px 0;
text-align: center;
font-weight: bold;
position: relative;
}

#galerie img
{
width: 150px;
height: 150px;
display: block;
padding: 3px;
border: 1px solid #8B0000;
}

#galerie a .gross
{
display: none;
}

#galerie a:hover .gross
{
width: 250px;
height: 250px;
display: block;
position: absolute;
top: -50px;
left: -50px;
z-index: 1;
background: #fff;
}

 /*--Spezialangaben für den Internet Explorer 7--*/
*+html #galerie a:hover { z-index: 1;}
*+html #galerie li{position: static;}
*+html #galerie a {position: relative;}

/*--Spezialangaben für den Internet Explorer 6--*/
*html #galerie a:hover {display: block; z-index: 1;}
*html #galerie li{position: static;}
*html #galerie a {position: relative;}
</style>

</head>
Zum Vergrößern anklicken....
Du kannst den CSS-Code aber auch in eine externe CSS-Datei auslagern.
Lies dir hierzu einmal folgende Sten durch:
Friedels Homepage - Anleitungen für HTML-Autoren und mehr
 
hmmm eine frage noch...
der hovereffekt klappt...jedoch "Kleben" die hoverbilder an den kleinen bildern fest... ich möchte das die hover bilder in der mitte meines iframes angezeigt werden und nicht aus dem iframe rausragen... siehe bild:

unbenanntkt0.jpg

und ich würde das ganze gerne in eine tabelle bringen, damit es schön geordnet ist... wie muss ich da vor gehen? hier mein code:

PHP: 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#galerie li
{
list-style-type: none;
float: left;
margin: 0 10px 10px 0;
text-align: center;
font-weight: bold;
position: relative;
}

#galerie img
{

display: block;
padding: 3px;
border: 1px solid #8B0000;
}

#galerie a .gross
{
display:none;
}

#galerie a:hover .gross
{

display: block;
position:fixed;
top: inherit;
height:inherit;
right:inherit;


z-index: 1;
}
</style>
</head>

<body>
<div id="galerie">

<ul>

<li><a href="#"><img src="pics/stuff1klein2.jpg" alt="Stuff1"><img src="pics/stuff1.jpg" alt="Stuff1" class="gross"></a></li>
<li><a href="#"><img src="pics/stuff3klein2.jpg" alt="Stuff3"><img src="pics/stuff3.jpg" alt="Stuff1" class="gross"></a></li>
<li><a href="#"><img src="pics/stuff5klein2.jpg" alt="Stuff5"><img src="pics/stuff5.jpg" alt="Stuff1" class="gross"></a></li>
<li><a href="#"><img src="pics/stuff7klein2.jpg" alt="Stuff7"><img src="pics/stuff7.jpg" alt="Stuff1" class="gross"></a></li>
<li><a href="#"><img src="pics/stuff2klein2.jpg" alt="Stuff2"><img src="pics/stuff2.jpg" alt="Stuff1" class="gross"></a></li>
<li><a href="#"><img src="pics/stuff4klein2.jpg" alt="Stuff4"><img src="pics/stuff4.jpg" alt="Stuff1" class="gross"></a></li>
<li><a href="#"><img src="pics/stuff6klein2.jpg" alt="Stuff6"><img src="pics/stuff6.jpg" alt="Stuff1" class="gross"></a></li>

</ul>
</div>
<div style="clear: both;">
</div>
</body>
</html>
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben