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

Mouse over / hover OHNE Java!

Status
Für weitere Antworten geschlossen.
V

vivistar

Neues Mitglied
Hi!

Habe das Forum durchgeguckt und bin leider zu keinem Ergebniss gekommen, was mir weitergeholfen hat oder funktioniert hat bei mir.

Ich brauche Hilfe beim Mouseover / hover Effekt, ohne daß Javascripte dabei zur Verwendung kommen.

Folgendes Beispiel:

<!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>Testseite</title>
<style type="text/css">
img, div { behavior: url(../Eigene%20Webseite-Bilder/iepngfix.htc) }
<!--
body {
background-image: url(../Eigene%20Webseite-Bilder/Hintergund-test-Trans.png);
background-repeat: no-repeat;
margin-top: 380px;
background-position: 50% 0px;
background-color: #08101b;
}
a:link {
text-decoration: none;
color: #08101B;
}
a:visited {
text-decoration: none;
color: #08101B;
}
a:hover {
text-decoration: none;
color: #08101B;
}
a:active {
text-decoration: none;
color: #08101B;
}
.Stil1 {
font-size: 18px;
font-style: italic;
color: #666666;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('../Eigene Webseite-Bilder/Buttons/Home1-over.png','../Eigene Webseite-Bilder/Buttons/Unser Prinzip1-over.png','../Eigene Webseite-Bilder/Buttons/Produkte1-over.png','../Eigene Webseite-Bilder/Buttons/Kontakt1-over.png','../Eigene Webseite-Bilder/Buttons/Impressum3-over.png','../Eigene Webseite-Bilder/Buttons/Home-Extrem-hover.png','../Eigene Webseite-Bilder/Buttons/Unser Prinzip-extreem-hover.png','../Eigene Webseite-Bilder/Buttons/Produkte-extreem-hover.png','../Eigene Webseite-Bilder/Buttons/Kontakt-extreem-hover.png','../Eigene Webseite-Bilder/Buttons/Impressum-extreem-hover.png','../Eigene Webseite-Bilder/Buttons/homer-klein-hover.png','../Eigene Webseite-Bilder/Buttons/Unser Prinzip-klein-hover.png','../Eigene Webseite-Bilder/Buttons/Produkte-kleiner-hover.png','../Eigene Webseite-Bilder/Buttons/Produktanfrage-klein-hover.png','../Eigene Webseite-Bilder/Buttons/Partner-hover.png')">
<p align="center"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','../Eigene Webseite-Bilder/Buttons/homer-klein-hover.png',1)"><img src="../Eigene Webseite-Bilder/Buttons/homer-klein.png" alt="Home" name="Image6" width="161" height="36" border="0" id="Image6" /></a><a href="Unser Prinzip.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','../Eigene Webseite-Bilder/Buttons/Unser Prinzip-klein-hover.png',1)"><img src="../Eigene Webseite-Bilder/Buttons/Unser Prinzip-klein.png" alt="Unser Prinzip" name="Image7" width="164" height="36" border="0" id="Image7" /></a><a href="Produkte.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','../Eigene Webseite-Bilder/Buttons/Produkte-kleiner-hover.png',1)"><img src="../Eigene Webseite-Bilder/Buttons/Produkte-kleiner.png" alt="Produkte" name="Image8" width="164" height="36" border="0" id="Image8" /></a><a href="Produktanfrage.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','../Eigene Webseite-Bilder/Buttons/Produktanfrage-klein-hover.png',1)"><img src="../Eigene Webseite-Bilder/Buttons/Produktanfrage-klein.png" alt="Produktanfrage" name="Image13" width="163" height="33" border="0" id="Image13" /></a><a href="Partner.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image17','','../Eigene Webseite-Bilder/Buttons/Partner-hover.png',1)"><img src="../Eigene Webseite-Bilder/Buttons/Partner.png" alt="Partner" name="Image17" width="163" height="33" border="0" id="Image17" /></a></p>

</body>
<head>
<link rel="icon" href="../Eigene Webseite-Bilder/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="../Eigene Webseite-Bilder/favicon.ico" type="image/x-icon" />
</head>
</html>
Zum Vergrößern anklicken....




Wie man sieht, bisher alles fein mit Javascript. Da der IE ab Version 7 aber ja gerne sowas standartmäßig blockiert, haben sich diese tollen Effeke damit in Luft aufgelöst^^

Wie man ebenfalls sieht, habe ich mir Buttons gemacht für die Menüführung.
Wer kann mir nun (am besten Anhand meines Beispieles) zeigen, welcher Code hier angebracht ist und wie ich ihn hier schreiben kann, daß der Effekt der gleiche ist, ohne JAva zu verwenden?

Das dies wohl geht, konnte ich den anderen Beiträgen und im Internet entnehmen. Leider habe ich es einfach nicht hinbekommen :(
 
Werbung:
Zunächst mal: Java ist eine Hochsprache, JavaScript eine Scriptsprache. Das einzige, was beide gemeinsam haben, sind die 4 Buchstaben am Anfang.

Mit HTML geht sowas jedenfalls nicht, aber sehr wohl mit CSS. Suche nach der Pseudoklasse ":hover".
 
Bin dabei immer auf das Problem gestoßen, daß ich nicht weiß, wie man hier meine Buttons einfügt :( Ich habe ja für jeden Link einen Button erstellt. (png Datei)


Nehmen wir das Beispiel von selfhtml

<style type="text/css">
a:link { font-weight:bold; color:blue; text-decoration:none; }
a:visited { font-weight:bold; color:silver; text-decoration:none; }
a:focus { font-weight:bold; color:red; text-decoration:underline; }
a:hover { font-weight:bold; color:green; text-decoration:none; }
a:active { font-weight:bold; color:lime; text-decoration:underline; }

h1:focus { background-color:red; }
h1:hover { background-color:silver; }
h1:active { background-color:green; }
</style>
Zum Vergrößern anklicken....



Nun will 5 Buttons einfügen, jeweils mit einem Link versehen.
Magst du mir da mal ein Beispiel sagen, wie das aussehen müsste?
 
Werbung:
IE6 kann diese Pseudoklassen nur für Links (<a>), nicht aber für andere Elemente.
 
Werbung:
Danke dir Efchen! Ich habe gestern den ganzen Tag gesucht und versucht. Nun habe ich heute tatsächlich etwas gefunden, woraus ich was machen konnte :)

Trotzdem noch eine Frage dazu:

Mein "hover" Bild erscheint nur im Hintergund und das originale bleibt darauf im Vordergrund kleben^^

Hier mein aktueller Code dafür:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS hover</title>
<style type="text/css">
.box {
margin-left:0px;
margin-top:0px;
}
#bild a,#bild a:visited {
display:block;
}
#bild a:hover {
background: url('../Eigene Webseite-Bilder/Buttons/homer-klein-hover.png') no-repeat 620px 0px;
}
body {
background-image: url(../Eigene%20Webseite-Bilder/Hintergund-test-Trans.png);
background-color: #08101B;
background-repeat: no-repeat;
margin-top: 380px;
background-position: 50% 0px;
}
a:link {
color: #08101B;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #08101B;
}
a:hover {
text-decoration: none;
color: #08101B;
}
a:active {
text-decoration: none;
color: #08101B;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<div id="bild">
<div class="box">
<div align="center"><a href="index.html"><img src="../Eigene Webseite-Bilder/Buttons/homer-klein.png" name="Home" id="Home"/></a> </div>
</div>
</div>
</body>
</html>
Zum Vergrößern anklicken....


Wie kann ich das ändern ? Es soll ja das Vordergrundbild (nicht hover Bild) beim rüberfahren mit der Maus nicht mehr zu sehen sein, sondern nur das Hintergrundbild (hover-Bild).

Möglich? Wenn ja - wie?
 
vivistar schrieb:
Mein "hover" Bild erscheint nur im Hintergund und das originale bleibt darauf im Vordergrund kleben
Zum Vergrößern anklicken....
Klar, Du tauschst ja auch nur das Hintergrundbild aus.

Wie kann ich das ändern ? Es soll ja das Vordergrundbild (nicht hover Bild) beim rüberfahren mit der Maus nicht mehr zu sehen sein, sondern nur das Hintergrundbild (hover-Bild).
Zum Vergrößern anklicken....

Du meinst das Image im Link ausschalten, wenn man über den Link fährt?
Code: 
a:hover img {
display:none;
}
(ungetestet)
 
Werbung:
Ne..geht nicht. Da blinkt das Bild nur wie irre und das hover Bild is ganz weg :(

Mhhh...


<style type="text/css">
.box {
margin-left:0px;
margin-top:0px;
}
#bild a,#bild a:visited {
display:block;
}
#bild a:hover {
background: url('../Eigene Webseite-Bilder/Buttons/homer-klein-hover.png') no-repeat 620px 0px;
}
body {
background-image: url(../Eigene%20Webseite-Bilder/Hintergund-test-Trans.png);
background-color: #08101B;
background-repeat: no-repeat;
margin-top: 380px;
background-position: 50% 0px;
}
a:link {
color: #08101B;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #08101B;
}
a:hover {
text-decoration: none;
color: #08101B;
}
a:active {
text-decoration: none;
color: #08101B;
}
a:hover img {
display:none;
}

</style>
Zum Vergrößern anklicken....


Scheint nicht die optimale Lösung so zu sein oder wie?
Verdammt - kann doch nicht so schwer sein^^ :(

Doch lieber Pseudoklasse <a> ? Oder was ist das gängigste?
 
Gib mal bitte den Link zur Seite. In Natura kann man sich das besser ansehen.
 
Werbung:
Wenn wir hier zu keinem Ergebniss kommen auf die schnelle, können wir vielleicht nochmal zu dem Thema aus diesem Thread zurück kommen:

http://www.html.de/html-und-xhtml/23782-pngs-und-ie-5-6-a.html


Die ganzen hover-Sachen habe ich ja schon über eine Javascript stehen - so ist es ja nicht. Hier ist ja nur mein Problem, daß sobald ich den behavior einsetze, der in IE 5+6 die Transparenz meiner PNG's ermöglicht, der Hover-Effekt weg ist und beim rüberfahren mit der Maus das Hover-Bild stehen bleibt :( Wenn man das lösen könnte, wäre ich ja auch schon zufrieden.

Das nur mal so am Rande......falls das hier nichts wird.
 
Nimm das <img> raus und tausche nur die Hintergrundgrafiken aus. Dann sollte das problemlos gehen.
 
Wenn ich das tue, bleibt das Vordergrundbild wieder stehen^^ :(

Siehe Link


Und übrigens: bei dieser Methode habe ich einen Kasten /Rand um mein Bild, was ich bei der Javascriptmethode nicht habe. Woran liegt das?Das soll da weg ;)
 
Werbung:
Welches Vordergrundbild? Das sollst Du ja rausnehmen!

Der "Kasten" um das Bild ist der Hinweis Deines Browsers, dass der Link angeklickt wurde und für Tastaturnavigation zwingend erforderlich. Der geht nicht weg. Bzw. solltest Du den auf keinen Fall wegnehmen, wenn Deine Site nutzbar bleiben sollte.
 
Da stehe ich gerade auf dem Schlauch.

Wenn ich das tue, ist gar kein Bild mehr da.

Du meinst, daß ich aus dem:

<div align="center"><a href="index.html"><img src="../Eigene Webseite-Bilder/Buttons/homer-klein.png" name="Home" id="Home"/></a> </div>
Zum Vergrößern anklicken....

das rot makierte raus nehmen soll?

Ein anders IMG hab ich ja nicht. Aber wie gesagt - dann ist nix mehr zu sehen.
 
Efchen schrieb:
Der "Kasten" um das Bild ist der Hinweis Deines Browsers, dass der Link angeklickt wurde und für Tastaturnavigation zwingend erforderlich. Der geht nicht weg. Bzw. solltest Du den auf keinen Fall wegnehmen, wenn Deine Site nutzbar bleiben sollte.
Zum Vergrößern anklicken....



Den Hinweis, daß der Link angeklickt wurde halte ich für mehr als Überflüssig, da man doch weiß, was man angeklickt hat, weil sich die dem entsprechende Seite öffnet oder wie? Solche Kästen um Navigationsbutton kann ich auf 90% der Seiten nirgens finden - verstehe da jetzt nicht, warum das dann so wichtig ist? Der Kasten ist ja auch da, wenn man es nicht anklickt....;)
 
Werbung:
Efchen schrieb:
Nimm das <img> raus und tausche nur die Hintergrundgrafiken aus. Dann sollte das problemlos gehen.
Zum Vergrößern anklicken....

Hallo Efchen,
hallo Vivi,

img ist schon gut, sonst wird beim Drucken nichts gedruckt...

Aber display:none; ist nicht gut, da dann der Browser den Platz nicht frei hält,
den er aber bräuchte, um das Hintergrundbild anzuzeigen...


Lösung: visibility:hidden;

Grüße
Bernhard
 
Hey.....stimmt - das hat soweit funktioniert!

Nächstes Problem: je nach Bildschirmgröße sitzt nun das Hintergrundbild woanders :( Habs mit position: 50% 0px; versucht - geht aber nicht. Das soll natürlich IMMER übereinander kleben.

Was muss ich dazu wohin schreiben?

Ein Problem nach dem anderen - sorry, bin halt Anfänger.


Siehe Link
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben