| Vorheriges Thema anzeigen :: Nächstes Thema anzeigen |
| Autor |
Nachricht |
isotropisch
Newcomer
Angemeldet: 15.03.2006
Beiträge: 23
|
 Verfasst am: 09.02.2007, 18:40 Titel:
Problem mit mouseover |
 |
|
|
|
Hallo Community,
ich hab folgendes Problem undzwar , wie füge ich hier einen mouseover effekt ein ?
| Code: |
<div id="navigation">
<div id="navi_news">
<img border="0" src="bilder/navi_news.gif" width="77" height="20"></div>
|
das einzigste was mir selber einfiel war das :
| Code: |
<script language="JavaScript">
navi1= new Image();
navi1.src = "navi_news.gif"
navi2= new Image();
navi2.src = "navi_news2.gif"
</script>
|
aber wie bekomme ich das jetzt zusammen ?!
Bitte um Hilfe 
danke im Vorraus iso |
|
| Nach oben |
|
 |
elite
Mitglied
Angemeldet: 20.07.2004
Beiträge: 1005
Interessen: Coding, DLRG, Radsport
|
| Verfasst am: 09.02.2007, 19:43 Titel:
|
|
|
|
|
Bin grad auf dem Sprung deshalb hier nur mal schnell was aus nem Projekt von mir rauskopiert. Sollte denke ich weiterhelfen:
| Code: |
<td><a href="?section=kontakt" onMouseOver="image5.src='images/button_kontakt_r.jpg';" onMouseOut="image5.src='images/button_kontakt.jpg';">
<img name="image5" src="images/button_kontakt.jpg" width="83" height="27" alt="Kontakt" title="Kontakt"></a></td> |
|
|
| Nach oben |
|
|
AEQUITAS
Mitglied
Angemeldet: 16.08.2005
Beiträge: 513
Wohnort: Köln
Interessen: Freundin, Parties, Webdesign, eSport, Tischtennis, Laufen
|
|
| Nach oben |
|
|
nawler
Mitglied
Angemeldet: 24.02.2006
Beiträge: 853
Wohnort: Freiburg
Interessen: Fotografie, Grafik, Billard, Snowboarding
|
|
| Nach oben |
|
|
Impi
Mitglied
Angemeldet: 06.05.2006
Beiträge: 530
|
| Verfasst am: 10.02.2007, 00:36 Titel:
|
|
|
|
|
isotropisch will das aber offensichtlich mit JavaScript lösen. Falls du an deiner Methode fest halten willst findest du in der Tutorialsektion dieses Forums das was du suchst.
Impi |
|
| Nach oben |
|
|
AEQUITAS
Mitglied
Angemeldet: 16.08.2005
Beiträge: 513
Wohnort: Köln
Interessen: Freundin, Parties, Webdesign, eSport, Tischtennis, Laufen
|
| Verfasst am: 10.02.2007, 15:24 Titel:
|
|
|
|
|
warum an javascript festhalten, wenn es jeder mit css benutzen kann, gibt ja schließlich auch leute ohne javascript!
// edit
nawler, dein code schnipsel ist ein ganzes stück anders gemacht ... |
|
| Nach oben |
|
|
isotropisch
Newcomer
Angemeldet: 15.03.2006
Beiträge: 23
|
| Verfasst am: 10.02.2007, 19:45 Titel:
re |
|
|
|
|
Hallo,
erstmal danke für die Antworten. Wie ich das realisiere ist mir eigentlich egal ob mit javascript oder css . Bei einem ganz normalen Bild bekomme ich das ja auch alles gebacken jedoch wenn ich versuche den Befehl in den <div> Bereich zu packen , wird die ganze Navi ausgeblendet oder es geschieht nichts.
Mh  bin ich da jetzt einfach zu blöd für , oder hab ich nen ganz banalen Fehler gemacht, könnte vllt jmd. von euch mir den passenden <div> Befehl hier rein schreiben + vllt kurze erörterung. Wäre euch sehr verbunden.
ps: so hab ich es versucht:
CSS
| Code: |
.hover {
text-decoration: none;
border:0;
padding:0;
display: block;
text-indent: -9999px;
letter-spacing: -9999px;
font-size:0;
width: 93px;
height:20px;
background: url("mouseover/navi_awards2.jpg") 0 0 no-repeat;
}
.hover:hover {
background-position: -100px 0;
} |
HTML
| Code: |
<div id="navi_awards">
<img border="0" src="bilder/navi_awards.gif" width="93" height="20">
<a href="#" class="hover"></a>
</div>
|
Danke im Vorraus. iso |
|
| Nach oben |
|
|
Helmchen
Mitglied
Angemeldet: 01.04.2006
Beiträge: 65
|
| Verfasst am: 11.02.2007, 02:03 Titel:
|
|
|
|
|
Wenn sich das Bild ändern soll, dann benötigt logischerweise auch das Bild die Klasse "hover".
| Code: |
<div id="navi_awards">
<img border="0" src="bilder/navi_awards.gif" width="93" height="20" class="hover" />
</div> |
|
|
| Nach oben |
|
|
isotropisch
Newcomer
Angemeldet: 15.03.2006
Beiträge: 23
|
| Verfasst am: 11.02.2007, 16:12 Titel:
|
|
|
|
|
Hallo,
da ich es voll nicht auf die Kette bekomme poste ich mal den kompletten Quelltext vllt kann mir jmd. helfen .
html
| Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<title>.hollywood-gaming</title>
<link rel="stylesheet" type="text/css" media="screen" href="./inc/style.css" />
</head>
<body>
<div id="background">
<!-- representative zeilenumbrüche -->
</div>
<div id="content" style="width: 779px; height: 49px">
<div id="content">
<span id="header"> </span>
</div>
<div id="content">
<span id="header2"> </span>
</div>
<div id="navigation">
<div id="navi_news">
<img border="0" src="bilder/navi_news.gif" width="77" height="20" </div>
<div id="navi_team">
<img border="0" src="bilder/navi_team.gif" width="72" height="20"></div>
<div id="navi_matches">
<img border="0" src="bilder/navi_matches.gif" width="96" height="20"></div>
<div id="navi_awards">
<img border="0" src="bilder/navi_awards.gif" width="93" height="20" class="hover">
</div>
<div id="navi_sponsors">
<img border="0" src="bilder/navi_sponsors.gif" width="105" height="20"></div>
<div id="navi_misc">
<img border="0" src="bilder/navi_misc.gif" width="81" height="20"></div>
</body>
</html>
|
css
| Code: |
body {
margin:0;
padding:0;
background-color:#212121;
background-repeat:repeat-y;
background-position:center;
background-image:url(../bilder/body_bg.gif);
}
div#background {
background-position:top;
background-repeat:repeat-x;
background-image:url(../bilder/content_bg.gif);
}
div#content {
width:524px;
margin:auto;
}
span#header {
width:524px;
height:156px;
display:block;
background-repeat:no-repeat;
background-image:url(../bilder/header.gif);
}
span#header2 {
width:524px;
height:3px;
display:block;
background-repeat:no-repeat;
background-image:url(../bilder/header_2.gif);
}
div#navigation {
width:524px;
margin:auto;
}
#navi_news {
width:77px;
height:20px;
display:block;
background-repeat:no-repeat;
image:url(../bilder/navi_news.gif);
float:left;
cursor:pointer;
}
#navi_team {
width:72px;
height:20px;
display:block;
background-repeat:no-repeat;
image:url(../bilder/navi_team.gif);
float:left;
cursor:pointer;
}
#navi_matches {
width:96px;
height:20px;
display:block;
background-repeat:no-repeat;
image:url(../bilder/navi_matches.gif);
float:left;
cursor:pointer;
}
#navi_awards {
width:93px;
height:20px;
display:block;
background-repeat:no-repeat;
image:url(../bilder/navi_awards.gif);
float:left;
cursor:pointer;
}
.hover {
text-decoration: none;
border:0;
padding:0;
display: block;
text-indent: -9999px;
letter-spacing: -9999px;
font-size:0;
width: 93px;
height:20px;
background: url("mouseover/navi_awards2.jpg") 0 0 no-repeat;
}
#navi_sponsors {
width:105px;
height:20px;
display:block;
background-repeat:no-repeat;
image:url(../bilder/navi_sponsors.gif);
float:left;
cursor:pointer;
}
#navi_misc {
width:81px;
height:20px;
display:block;
background-repeat:no-repeat;
image:url(../bilder/navi_misc.gif);
float:left;
cursor:pointer;
}
|
meine letze rettung
danke schonmal . iso |
|
| Nach oben |
|
|
vercci
Mitglied
Angemeldet: 10.04.2019
Beiträge: 436162
|
|
| Nach oben |
|
|
vercci
Mitglied
Angemeldet: 10.04.2019
Beiträge: 436162
|
|
| Nach oben |
|
|
vercci
Mitglied
Angemeldet: 10.04.2019
Beiträge: 436162
|
|
| Nach oben |
|
|
vercci
Mitglied
Angemeldet: 10.04.2019
Beiträge: 436162
|
|
| Nach oben |
|
|
|
FAQ
Suchen
Mitgliederliste
Benutzergruppen
Registrieren
Profil
Einloggen, um private Nachrichten zu lesen
Login
