Mouse over- Butten
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
antwort
benutzen
bibliothek
bild
button
code
datei
eigenschaft
frage
hintergrundbild
leute
mache
maus
position
sagen
start
tag
url
versuchen
vorlage
-
hallo,
für meine Seite habe ich einige tag/bild">bilder mit einer verlinkung vorgesen, so als menü. nun fände ich es cool wenn sich das bild ändern würde, wenn man mit der maus drüber fährt. habe schon gegooglet aber nicht gefunden, was wirklich auch klapte. Es wäre cool wenn mir einer das mal sagen könnte, wei das geht.
mfg kiote -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Entweder geht das über JavaScript (da ich da ber nicht so bewandert bin, kann ich dir nicht sagen, wie) oder per css:
css-Datei:
div.button { background:irgendeinbild.gif no-repeat; ... } div.button:hover { background:anderesbild.gif no-repeat; ... }
html-Datei:
<div class="button"></div>
fertig. Nur noch richtig in Position bringen und dann hast du die Antwort. -
irgendwie klappt das bei mir nicht. ich hab eine css-datei angelegt, die so aussieht:
<style type="text/css"> /* <![CDATA[ */ div.start { background:Vorlage/start_blau.png no-repeat; } div.start:hover { background:Vorlage/start_rot.png no-repeat; } /* ]]> */
und dann einen link zur datei gemacht, der so aussieht:
<head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title></title> <link rel="stylesheet" href="css.css" type="text/css" /> </head>
und auf eine inhaltlose seite (also keine anderen bilder u.s.w) habe ich dann das eingefügt:
<div class="start">Hello World</div>
es wird nur das "Hello World" angezeigt, sonst nichts
Mache ich etwas falsch? -
Wenn du eine reine CSS-Datei brauchst, was ich annehme, weil du sie mit dem link-Tag eingebunden hast, musst die CSS-Datei wie folgt ohne CDATA-Tag aussehen:
div.start { background:Vorlage/start_blau.png no-repeat; } div.start:hover { background:Vorlage/start_rot.png no-repeat; }
Deine angegebene CSS-Datei ist ein Inline-CSS-Codeausschnitt, der direkt im HTML-Code eingebettet werden kann. Also statt dem link-Tag. -
Es funktioniert aber trotzdem nicht. irgendetwas mache ich falsch. Gibt es sonst noch andere Möglichkeiten?
-
Ich habe hir sowas von einem link bei mir geht es.
<a href="" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Bild15','','Bilder/.jpg',1)"><img src="Bilder/.jpg" name="Bild15" width="158" height="25" border="0" id="Bild15" /></a>
-
die css-eigenschaft für ein hintergrundbild heipt nicht background.
richtig wäre
background-image:url(Vorlage/start_blau.png); repeat:no-repeat;
mfg
-
Versuche doch mal folgendes:
<html>
<head>
<link rel="stylesheet" href="css.css" type="text/css">
<script type="text/javascript">
<!--
function zweitesbild()
{
// zeigt das zweite Bild an, wenn jemand mit der Maus darüber fährt.
document.bild.src="bild1.jpg"
}
function erstesbild()
{
// zeigt wieder das erste Bild an, wenn die Maus das Bild verlässt.
document.bild.src="bild2.jpg"
}
//-->
</script>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<h3>Bildwechsel bei Mausberührung </h3>
<img name="bild" src="bild1.jpg" border="0"
onMouseOver="erstesbild()" onMouseOut="zweitesbild()">
</body>
</html>
-
@syberspace:
man kann auch die background-Eigenschaft benutzen da diese generell gilt und also alles enthalten kann.
@js-Leute:
überlegt euch ganz genau ob dafür wirklich Javascript notwendig ist. Es hat ja nicht jeder JS aktiviert und dann sieht es einfach nur blöd aus
@area-of-games:
css.css datei:
div.start { background:url("Vorlage/start_blau.png") no-repeat; width: *breite des bildes*; height: *höhe des bildes*; } div.start:hover { background:url("Vorlage/start_rot.png") no-repeat; }
head:
<head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title></title> <link rel="stylesheet" href="css.css" type="text/css" /> </head>
div:
<div class="start">Hello World</div> -
vielen dank für die vielen antworten. ich habe jetzt etwas mit javascript ausprobiert,was dann überraschend^^ geklappt hat. meine frage hat sich also beantwortet. nochmals vielen dank an alle.
-
über js bzw. mit der bibliothek "jquery" gehts das über das toggle event, sodass du zwischen 2 bildern wechselst, wenn die maus entwder über dem element ist oder halt nicht
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
