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

Bild nur beim drübergehen zu sehen

Status
Für weitere Antworten geschlossen.
D

disser2

Neues Mitglied
Hallo :wink:,

bin neu hier und hab ne Frage:

Kann mir jemand erklären, wie ich in HTML etwas so definieren kann, dass man nur beim drüberfahren mit der Maus ein Bild sieht? Ich kenn bis jetzt nur die Farben, die man sehen kann wenn man über einen Link fährt.

Hier ist der Rahmen dafür. Darin würde ich gerne ein Bild zeigen, wenn man mit der Maus drüberfährt und das das ganze dann anklickbar ist.

Ich bin für jede Hilfe dankbar!!!

lg disser2
 
html-code:
HTML: 
<a href="blabla.htm" class="link"></a>
css-code:
Code: 
.link {
background-image: url('wieß.jpg');
}
.link :hover {
background-image: url('bild.jpg');
}
Das hintergrundbild in Farbe des Hintergrundes(gleich groß) muss sein, damit sich nicht das ganze Layout verschiebt.
Du kannst es natürlich auch mit JS machen(bei onmouseover das Bild austauschen), aber bei manchen(die JS deaktiviert haben), wird es dann nicht korrekt dargestellt.
mfg Bleistift
 
vielen dank. aber ich teste das gerade nur mit phase aus (html-editor). wie muss ich den da angeben wo die bilder gespeichert sind?

also ich hab meine html-seite auf einen server hochgeladen und die bilder auch. aber wenn ich den namen des bildes bei "url('wieß.jpg');" angebe findet der das nicht.
 
Zuletzt bearbeitet:
Liegt dein Bild mit dem Namen 'wieß.jpg' denn im selben Ordner wie deine HTML-Datei? Wenn nicht, musst du natürlich den Pfad anpassen. Heißt es auch wirklich 'wieß.jpg?'
 
also es liegt genau im gleichen ordner. und wenn ich vorschau in phase mache, dann kommt meine seite genau wie vorher, aber nichts wird neu angezeigt keine bild kein test kein quellcode :-(

ich habe das in den header gemacht:

<style type="text/css">
.link {
background-image: url('Normal.jpg');
}
.link :hover {
background-image: url('Bild.jpg');
}
</style>

und das ins body:

<a href="http://www.google.de/" class="link"></a>

kann ich nicht einfach in css eine normale web-url angeben? wie geht denn das?

lg disser2
 
Es muss heißen ".link:hover" und nicht ".link :hover". Das Leerzeichen ist zuviel.
Und in der CSS-Definition steht bereits eine normale URL: url('Normal.jpg') ist doch in Ordnung.
 
Danke für den tipp, aber es funktioniert immer noch nicht :cry:

mit url meinte ich eine richtige internetadresse.

lg disser2
 
Du kannst als URL alles angeben, was gültig ist:
Normal.jpg
verzeichnis/Normal.jpg
../verzeichnis2/Normal.jpg
/Normal.jpg
http://www.sonstig.es/Normal.jpg
 
Also ich habs jetzt auch mit normaler URL ausprobiert, ging auch nicht.

ich hab jetzt einfach mal den ganzen Quelltext kopiert, wär schön wenn sich jemand mal den anfang davon angucken könnte. Es soll einfach in ein anderes Bild wechseln wenn man drüberfährt, egal was.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
.link {
background-image: url('');
}
.link:hover {
background-image: url('');
}
</style>

</head>
<body text="#000000" bgcolor="#000000" link="#FF0000" alink="#FF0000" vlink="#FF0000">

<h1><p align="center"><font color="#FFFFFF">TESTTEST</font></p></h1>

<a href="http://www.google.de/" class="link"></a>

<p align="center">
<font color="#FFFFFF"><font face="Parade"><font size="+1">Test1</font></font> &nbsp;</font>
<img src="http://img233.imageshack.us/img233/603/weierrandxc7.jpg" align="middle">
</p>

<p align="center">
<img src="http://img233.imageshack.us/img233/603/weierrandxc7.jpg" align="middle">
<font color="#FFFFFF"><font face="Parade"><font size="+1">&nbsp; Test2</font></font></font>
</p>

<p align="center">
<font color="#FFFFFF"><font face="Parade"><font size="+1">Test3</font></font> &nbsp;</font>
<img src="http://img233.imageshack.us/img233/603/weierrandxc7.jpg" align="middle">
</p>

<p align="center">
<img src="http://img233.imageshack.us/img233/603/weierrandxc7.jpg" align="middle">
<font color="#FFFFFF"><font face="Parade"><font size="+1">&nbsp; Test4 &nbsp;&nbsp;</font></font></font>
</p>

<p align="center">
<font color="#FFFFFF"><font face="Parade"><font size="+1">&nbsp;&nbsp;Test5</font></font>&nbsp;</font>
<img src="http://img233.imageshack.us/img233/603/weierrandxc7.jpg" align="middle">
</p>
</body>
</html>
Zum Vergrößern anklicken....
 
Code: 
<a href="http://www.google.de/" class="link"></a>
<a> ist ein inline-Element. Es ist nur so breit wie sein Inhalt und so hoch wie font-size. <a> hat aber kein Inhalt.
Mit display: block; lässt es sich wie ein block-Element formatieren:
Code: 
.link {
display: block;
height: 134px;
width: 134px;
border: 1px solid blue; /* nur zum Verständniß */

}
.link:hover {
background-image: url(http://img233.imageshack.us/img233/603/weierrandxc7.jpg);
}
Auch durch float: richtung; oder position:absolute; würden inline-Elementen auf width und height anspringen.

Bei Problemen mit background-image solltest du unbedingt ein Link zu der (test-)Seite posten.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben