Suche einfache Methode, für ein Bild mouseover

XXO1989 · 30. Juni 2011

Hi Computerbasler,
ich suche eine einfache Methode für ein Bild mouseover.
Die DW Methode sieht mir zu überladen aus!

Code:
<script type="text/javascript">
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_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_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_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('images/o_twitter.jpg','images/o_facebook.jpg')">
<div id="page_div">
<div id="main"></div>

<div id="header">
<div id="twitter"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('twitter','','images/o_twitter.jpg',1)"><img src="images/twitter.jpg" name="twitter" width="58" height="49" border="0" id="twitter2" /></a></div>

<div id="facebook"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('facebook','','images/o_facebook.jpg',1)"><img src="images/facebook.jpg" name="facebook" width="58" height="49" border="0" id="facebook2" /></a></div>
</div>

Funktioniert das Ganze, auch ohne JavaScript?

MfG
XXO1989

M.E. · 30. Juni 2011

Code:

<img 
onmouseover="this.src='bild2.jpg';"
 onmouseout="bild1 oder 3.jpg';" 
src="bild1.jpg" 
alt="bla"
 />

mhd_ec_alex · 30. Juni 2011

css ... einfach mal googlen.

bsp,: css

Code:

.menubutton	{  	
		display:block;
		width:70px;
		height:43px
		}
.verein	{
		background-image:url(images/verein.png)
		}
.verein:hover	{
		background-image:url(images/verein_active.png)
		}

html

Code:

<a href="index.php?t=verein" class="menubutton verein"></a>

DukeGozer · 30. Juni 2011

Da ich das auch suche und nicht solch einen Plan habe (bzgl. CSS): einfach in die bestehende CSS einfügen?

mhd_ec_alex · 30. Juni 2011

geht in eine bestehende, im kopf der html datei oder in einer seperaten css, halt nur mit den Klassen/ids nicht durcheinander kommen.

über class an stelle im html-code aufrufen wo mans braucht, am besten einfaches beispiel zum verständnis bauen, eh man es großflächig einsetzt.

.fF · 30. Juni 2011

Dein Bespielskript hat den riesen Vorteil, dass es die Bilder vorlädt. Das kannst du aber auch in einer JS-Zeile ereichen, indem du ein Image-Objekt erzeugt mit dem src deines Zweitbildes. Dann liegt die Datei im Cache des Browsers. Der eigentliche Austausch kommt dann wie von M.E. vorgeschlagen.
Ob bei der CSS-Lösung die Bilder vorgeladen werden, weiß ich nicht.

XXO1989 · 30. Juni 2011

Danke erstmal für Eure Antworten

#mhd_ec_alex
Ich finde die Methode gut, nur irgendwie raff ich sie noch nicht.

html

<div id="header">

<div id="twitter"><a href="index.php?t=twitter" class="social_network_t twitter"></a></div>

<div id="facebook"><a href="index.php?t=facebook" class="social_network_f facebook"></a></div>
</div>

CSS

social_network_t{
display:block;
position:absolute;
width:58px;
height:49px;
margin-left: 934px;
margin-top: 10px;
margin-bottom: 12px;
}

social_network_f{
display:block;
position:absolute;
width:58px;
height:49px;
margin-left: 934px;
margin-top: 59px;
margin-bottom: 12px;
}

.twitter{
background-image:url(images/twitter.jpg)
}

.twitter:hover{
background-image:url(images/o_twitter.jpg)
}

.facebook{
background-image:url(images/facebook.jpg)
}

.facebook:hover{
background-image:url(images/o_facebook.jpg)
}

Ergänzung
Hab den Fehler in social_network (social_network_f, social_network_t) behoben.

MfG
XXO1989

mhd_ec_alex · 30. Juni 2011

Code:

<div it="twitter"> ... class ="... twitter"

da könnte es zu schwierigkeiten kommen zwecks eindeutigkeit. zumal das auch noch doppelt ist.

dann legst du eine classe social_network an, definierst sie aber nicht dagegen, definierst du 2 verschiedene andere klassen die du nicht benutzt.

so sollte es klappen

Code:

<div id="social_network_f"><a href="" class="facebook"></a></div>

DukeGozer · 30. Juni 2011

Öhm, nicht mehr heute, aber könnte mir da jemand bei meiner Seite helfen? Ich bin 35 und brauche Hilfe über die Strasse zu kommen! ^^

mhd_ec_alex · 30. Juni 2011

Lol bin 30 und muss mir den Käse auch jedesmal zusammensuchen...über google gibts grade für css ausgezeichnete Tutorials.

Um mein Aschnitt oben mal zu erläutern.

Dahinter verbirgt sich erstmal eine liste

Code:

<ul id"nav">
 <li>element  </li>
<ul>

jedes element ist gleich groß dafür ist die klasse menubutton ums nicht 20x schreiben zu müssen also hat jedes menuelement

Code:

<a href="" class="menubutton"</a>

damit ist größe vorgeben.

dann kommt der hover also bildwechsel pro button.(class mit normal zustand und eine mit hover, über eine andere hintergrundgrafik.

Code:

<a href="verein.php" class="menubutton verein">

DukeGozer · 30. Juni 2011

Na bitte, lach, Du hast 5Jahre weniger. Als ich Informatik hatte, war COBOL und PASCAL noch Elite!

Ernsthaft: Klar kann man sich da reinlesen, nur wollte ich mich immer mehr auf den Inhalt beziehen, dat ist echt Hardcore kurz vor der Rente

Also nochmal, wer will, kann sich austoben

XXO1989 · 30. Juni 2011

Hab es geschafft,

danke Nochmal.

html

<div id="twitter"><a href="index.php?t=twitter" class="twitter"></a></div>

<div id="facebook"><a href="index.php?t=facebook" class="facebook"></a></div>

CSS

.twitter{
display: block;
width:58px;
height:49px;
margin-left: 934px;
margin-top: 10px;
margin-bottom: 12px;
background-image:url(../images/twitter.jpg);
}

.twitter:hover{
margin-left: 934px;
margin-top: 10px;
margin-bottom: 12px;
background-image:url(../images/o_twitter.jpg);
text-indent: -9999px;
}

.facebook{
display: block;
width:58px;
height:49px;
margin-left: 934px;
margin-top: 10px;
margin-bottom: 12px;
background-image:url(../images/facebook.jpg);
}

.facebook:hover{
margin-left: 934px;
margin-top: 10px;
margin-bottom: 12px;
background-image:url(../images/o_facebook.jpg);
text-indent: -9999px;
}

Ergänzung (1. Juli 2011)

Hab meine Seite mal eben Hochgeladen,

jetzt kommt der schwere Teil, Joomla integrieren.

Den Namen der Webseite bitte nicht falsch verstehen, ich baue Hobbymäßig Joomla Webseiten für nen Taschengeld. Mit http://www.radikalwebdesign.de/ möchte ich nur meine Werke zeigen und über ein späteres Forum Support geben.

Ergänzung (1. Juli 2011)

#.fF

Dein Bespielskript hat den riesen Vorteil, dass es die Bilder vorlädt. Das kannst du aber auch in einer JS-Zeile ereichen, indem du ein Image-Objekt erzeugt mit dem src deines Zweitbildes. Dann liegt die Datei im Cache des Browsers. Der eigentliche Austausch kommt dann wie von M.E. vorgeschlagen.
Ob bei der CSS-Lösung die Bilder vorgeladen werden, weiß ich nicht.

Könntest Du mir das nochmal genauer Erklären?

MfG
XXO1989

.fF · 1. Juli 2011

Wenn du den src innerhalb des <img> per JS änderst, wird (oder wurde) erst dann angefangen die neue Datei zu laden. Das ist bei langsamen Verbindungen unschön. Wenn du im JS ein Image-Objekt erzeugst, wird das Bild im Hintergrund geladen, wenn das Objekt erzeugt wird, also lange bevor das Bild mal angezeigt wird. Und genau das macht das von dir gepostete Skript unter anderem.

Sollte sich das Verhalten der Browser geändert haben, ignorier einfach meine Schreibe.

Suche

Suche einfache Methode, für ein Bild mouseover

XXO1989

Lieutenant

M.E.

Lt. Commander

mhd_ec_alex

Ensign

DukeGozer

Lieutenant

mhd_ec_alex

Ensign

.fF

Lt. Commander Pro

XXO1989

Lieutenant

mhd_ec_alex

Ensign

DukeGozer

Lieutenant

mhd_ec_alex

Ensign

DukeGozer

Lieutenant

XXO1989

Lieutenant

.fF

Lt. Commander Pro

Ähnliche Themen