nicht angemeldet
mouseover auf anderes bild übertragen?
hey leute,
ich versuche grade ein mouseover auf ein anderes bild zu übertragen, d.h. wenn man über das eine bild fährt, verändert sich das andere, soweit bin ich gekommen:
<table border="0" cellpadding="0" cellspacing="0">
<tr><form no="nored.gif" yes="red.gif">
<td>
<img id="home" src="nored.gif" width="24" height="42"></td>
<td>
<img src="home.gif" width="127" height="42" onmouseover="home(src=yes)" onmouseout="home(src=no)"></td>
</form>
</tr> ...
... nun ist mir aber klar, dass das nicht funktionieren kann. mir will aber auch nicht einfallen, wie es doch funktionieren könnte. wenn mir jemand da helfen kann - helft mir bitte.
danke.
jan.
-
hi,
das geht im prinzip ganz einfach als erstes brauchst du also ein javascript das generell für onmouseover taugt...z.B. das hier:
//
if (document.images) {
doc0 = new Image()
doc0.src = "001nr.gif"}
function HighLight(i) {
if (document.images) {
var thang = document.images[i].src
var off = thang.lastIndexOf("nr")
if (off != -1) {
document.images[i].src = thang.substring(0,off) + "lt" + ".gif"
}
}
}function Lightsoff(i) {
if (document.images) {
var thang = document.images[i].src
var on = thang.lastIndexOf("lt")
if (on != -1) {
document.images[i].src = thang.substring(0,on) + "nr" + ".gif" }
}
}so und nun bindest du das in deine site ein, etwa so:
<im head><SCRIPT language="JavaScript" >function HighLight(i) {
}
</SCRIPT>
<SCRIPT language="JavaScript" src="buttons.js"></SCRIPT>und im body:
<a href="start.htm" target="target01" onMouseOver="HighLight(0)" onMouseOut="Lightsoff(0)">
dieses script arbeitet so:
die original datei erhält die endung _nr, die datei zum auswechseln _lt.so nun zur bodyeinbindung:
die browser fangen immer bei 0 an zu zählen, also ist die erst grafik "0". in meinem beispiel wird also bei onmouseover die grafik "0" (die erste auf meiner site) ersetzt und bei onmouseout wieder zurück versetzt.du kannst jetzt sogar grafiken verschieden austauschen. z.B. wenn du über den link fährst tauscht du erst grafik "4" aus und beim wieder raus fahren nachmal grafik "234". ganz einfach
ich hoffe ich hab mich wenigstens ein bisserl verständlich ausgedrückt :-).
ole
(8-)>-
geht das nicht auch irgendwie über html und nicht mit java (vielleicht mit <form> oder so)?
jan
-
hi
soviel mir bekannt ist geht das nicht mit reinem HTML
ole
(8-)>
-
-
-
hi,
das geht im prinzip ganz einfach als erstes brauchst du also ein javascript das generell für onmouseover taugt...z.B. das hier:
//
if (document.images) {
doc0 = new Image()
doc0.src = "001nr.gif"}
function HighLight(i) {
if (document.images) {
var thang = document.images[i].src
var off = thang.lastIndexOf("nr")
if (off != -1) {
document.images[i].src = thang.substring(0,off) + "lt" + ".gif"
}
}
}function Lightsoff(i) {
if (document.images) {
var thang = document.images[i].src
var on = thang.lastIndexOf("lt")
if (on != -1) {
document.images[i].src = thang.substring(0,on) + "nr" + ".gif" }
}
}so und nun bindest du das in deine site ein, etwa so:
<im head><SCRIPT language="JavaScript" >function HighLight(i) {
}
</SCRIPT>
<SCRIPT language="JavaScript" src="buttons.js"></SCRIPT>und im body:
<a href="start.htm" target="target01" onMouseOver="HighLight(0)" onMouseOut="Lightsoff(0)">
dieses script arbeitet so:
die original datei erhält die endung _nr, die datei zum auswechseln _lt.so nun zur bodyeinbindung:
die browser fangen immer bei 0 an zu zählen, also ist die erst grafik "0". in meinem beispiel wird also bei onmouseover die grafik "0" (die erste auf meiner site) ersetzt und bei onmouseout wieder zurück versetzt.du kannst jetzt sogar grafiken verschieden austauschen. z.B. wenn du über den link fährst tauscht du erst grafik "4" aus und beim wieder raus fahren nachmal grafik "234". ganz einfach
ich hoffe ich hab mich wenigstens ein bisserl verständlich ausgedrückt :-).
ole
(8-)>-
die browser fangen immer bei 0 an zu zählen, also ist die erst grafik "0". in meinem beispiel wird also bei onmouseover die grafik "0" (die erste auf meiner site) ersetzt und bei onmouseout wieder zurück versetzt.
Hi! :-)
Ich würde eher mit Namen arbeiten, wenn ich mich nicht irre gab es mal eine IE Version die nicht bei 0 anfing, sondern irgendwie bei 4 *lange her, das ich das mal hatte* Also, würde ich mit Bildnamen arbeiten. Ist auch einfacher zu verwalten, falls Du anfängst mit leer.gifs zu arbeiten.
Gruß,
Jörn-
hi
also auf sämtlichen browsern die ich probiert habe (und das sind mitlerweile wirklich viele :-)) lief das script ohne probleme.
ole
(8-)>-
ok, danke jungs, wir haben derweil ne andere möglichkeit gefunden:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img name="NoRed" src="nored.gif" width="24" height="42"></td>
<td>
<img src="home.gif" width="127" height="42"
onmouseover="window.document.images['NoRed'].src='red.gif';"onmouseout="window.document.images['NoRed'].src='nored.gif';"></td>
</tr>
(von markus L-irgendwas, danke nochmal, markus)jan
-
<img src="home.gif" width="127" height="42"
onmouseover="window.document.images['NoRed'].src='red.gif';"Den MouseOver solltest Du aber in einen <a...> Tag tippen, sonst funktioniert das leider nicht unter Netscape.
Gruß,
Joern!-
<img src="home.gif" width="127" height="42"
onmouseover="window.document.images['NoRed'].src='red.gif';"Den MouseOver solltest Du aber in einen <a...> Tag tippen, sonst funktioniert das leider nicht unter Netscape.
wie sollte das dann aussehen? (<a mouseover...><img...> oder <img...><a mouseover...> oder iwe?)
letztlich ist's auch egal obs bei NC läuft oder nicht, ist eh nur so'n kleiner randeffekt (zu besehen unter:
http://www.fortunecity.de/roswell/lang/915/frames.html)
und da stört's nicht wenn der nicht da ist...
-
-
-
hi
also auf sämtlichen browsern die ich probiert habe (und das sind mitlerweile wirklich viele :-)) lief das script ohne probleme.
Mh, dann war ich wohl zu blöde. Das Problem hatten wir bei www.volksfuersorge.de und haben deswegen ne selten blöde Browser-Abfrage gescripptet. Weil, da hatte schon einer angefangen mit Bildnummern und ich mußte dann immer, für bestimmte Browser 4 dazu zählen (hab ich nicht ganz alleine gemacht)
Mh... grübel... also, okay... dann liegt der Fehler bei mir. :-)
Aber, das mit der Übersicht und dem zählen... bei leer.gifs, da finde ich mein Argument okay! *ggg*Gruß,
Joern! :-)-
hi
mit dem zählen kann echt ein graus werden, da geb ich dir auf ganzer linie recht :-)
hab mal ein archiv gebastelt mit dem script, wenn man über ein bild fuhr wurde das durch ein größeres ausgetauscht.
bei 100 bildern auf der site plus etlichen (so 30) zusätzlichen grafiken kamen da schon die lustigsten sachen bei raus *hehe*
ole
(8-)>
-
-
-
-
-
Einfachste Möglichkeit ist:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img name="NoRed" src="nored.gif" width="24" height="42"></td>
<td>
<img name="Home" src="home.gif" width="127" height="42" onmouseover="window.document.images['NoRed'].src='red.gif';" onmouseout="window.document.images['NoRed'].src='nored.gif';"></td>
</tr>Gruß
Markus -
Hallo Jan
2 Variationen mit Namen oder Bildnummern
anzuschauen unter http://www.pictum.de bildnummern)oder http://www.wilsch.de. Am besten immer auf eine Unterseite verzweigen.
BEISPIEL fuer Rollover mit Namen
<script language="JavaScript" type="text/javascript"><!-- Hide script from older browsers
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
version = "z0";
if (browserName == "Netscape" && browserVer >= 3) version = "ns";
if (browserName== "Microsoft Internet Explorer" && browserVer > 3) version = "ie";// ausgeschaltet
mfiroff = new Image(); mfiroff.src = "images/off_uns_fir.gif";
mleioff = new Image(); mleioff.src = "images/off_uns_lei.gif";
mas4off = new Image(); mas4off.src = "images/off_uns_as4.gif";
mrs6off = new Image(); mrs6off.src = "images/off_uns_rs6.gif";
msnioff = new Image(); msnioff.src = "images/off_uns_sni.gif";
maktoff = new Image(); maktoff.src = "images/off_uns_akt.gif";
mkonoff = new Image(); mkonoff.src = "images/off_uns_kon.gif";
upt1off = new Image(); upt1off.src = "images/off_as4_tea.gif";
upt2off = new Image(); upt2off.src = "images/off_as4_ang.gif";
upt3off = new Image(); upt3off.src = "images/off_as4_fee.gif";
upt4off = new Image(); upt4off.src = "images/off_as4_ist.gif";
upt5off = new Image(); upt5off.src = "images/off_as4_kon.gif";
upt6off = new Image(); upt6off.src = "images/off_as4_tra.gif";
upt7off = new Image(); upt7off.src = "images/off_as4_ins.gif";
upt8off = new Image(); upt8off.src = "images/off_as4_net.gif";
upt9off = new Image(); upt9off.src = "images/off_as4_bro.gif";
alc1off = new Image(); alc1off.src = "images/off_as4_lc1.gif";
alc2off = new Image(); alc2off.src = "images/off_as4_lc2.gif";
alc3off = new Image(); alc3off.src = "images/off_as4_lc3.gif";
alc4off = new Image(); alc4off.src = "images/off_as4_lc4.gif";
alc5off = new Image(); alc5off.src = "images/off_as4_lc5.gif";
alc6off = new Image(); alc6off.src = "images/off_as4_lc6.gif";// eingeschaltet
mfiron = new Image(); mfiron.src = "images/on_uns_fir.gif";
mleion = new Image(); mleion.src = "images/on_uns_lei.gif";
mas4on = new Image(); mas4on.src = "images/on_uns_as4.gif";
mrs6on = new Image(); mrs6on.src = "images/on_uns_rs6.gif";
msnion = new Image(); msnion.src = "images/on_uns_sni.gif";
makton = new Image(); makton.src = "images/on_uns_akt.gif";
mkonon = new Image(); mkonon.src = "images/on_uns_kon.gif";
upt1on = new Image(); upt1on.src = "images/on_as4_tea.gif";
upt2on = new Image(); upt2on.src = "images/on_as4_ang.gif";
upt3on = new Image(); upt3on.src = "images/on_as4_fee.gif";
upt4on = new Image(); upt4on.src = "images/on_as4_ist.gif";
upt5on = new Image(); upt5on.src = "images/on_as4_kon.gif";
upt6on = new Image(); upt6on.src = "images/on_as4_tra.gif";
upt7on = new Image(); upt7on.src = "images/on_as4_ins.gif";
upt8on = new Image(); upt8on.src = "images/on_as4_net.gif";
upt9on = new Image(); upt9on.src = "images/on_as4_bro.gif";
alc1on = new Image(); alc1on.src = "images/on_as4_lc1.gif";
alc2on = new Image(); alc2on.src = "images/on_as4_lc2.gif";
alc3on = new Image(); alc3on.src = "images/on_as4_lc3.gif";
alc4on = new Image(); alc4on.src = "images/on_as4_lc4.gif";
alc5on = new Image(); alc5on.src = "images/on_as4_lc5.gif";
alc6on = new Image(); alc6on.src = "images/on_as4_lc6.gif";
// Function einschaltenfunction imgOn(imgName)
{
if (version == "ns")
document[imgName].src = eval(imgName + "on.src");
//document.layers['navi'].document.images[imgName].src = eval(imgName + "on.src");
if (version == "ie")
document[imgName].src = eval(imgName + "on.src");
}
// Function ausschalten
function imgOff(imgName)
{
if (version == "ns")
document[imgName].src = eval(imgName + "off.src");
//document.layers['navi'].document.images[imgName].src = eval(imgName + "off.src");
if (version == "ie")
document[imgName].src = eval(imgName + "off.src");
//-->
</script>[.....]
<tr><td><a class="intern" href="as4_upt9.htm" OnMouseOver="imgOn('upt9');imgOff('upt2')" OnMouseOut="imgOff('upt9');imgOn('upt2')"><img name="upt9" src="images/off_as4_bro.gif" width=180 height=20 alt="Brokerage" border="0"></a></td></tr>
<tr><td><img name="" src="images/tex_15.gif" width=157 height=5 alt="Platzhalter" border="0"></td></tr>
<!-- IBM RS/6000 -->
<tr><td><a class="intern" href="rs6_leit.htm" OnMouseOver="imgOn('mrs6');imgOff('mas4');imgOff('upt2')" OnMouseOut="imgOff('mrs6');imgOn('mas4');imgOn('upt2')"><img name="mrs6" src="images/off_uns_rs6.gif" width=180 height=25 alt="" border="0"></a></td></tr>
<!-- Siemens -->
<tr><td><a class="intern" href="sni_leit.htm" OnMouseOver="imgOn('msni');imgOff('mas4');imgOff('upt2')" OnMouseOut="imgOff('msni');imgOn('mas4');imgOn('upt2')"><img name="msni" src="images/off_uns_sni.gif" width=180 height=25 alt="" border="0"></a></td></tr>
<!-- Aktuell -->
<tr><td><a class="intern" href="akt_leit.htm" OnMouseOver="imgOn('makt');imgOff('mas4');imgOff('upt2')" OnMouseOut="imgOff('makt');imgOn('mas4');imgOn('upt2')"><img name="makt" src="images/off_uns_akt.gif" width=180 height=25 alt="" border="0"></a></td></tr>
[.....]BEISPIEL fuer Rollover mit Bildreihenfolge
<script language="javascript" type="text/javascript">
<!--function preLoad()
{
if (document.images)
{
prIm('images/on_des.gif');
prIm('images/on_pro.gif');
prIm('images/on_hos.gif');
prIm('images/on_ref.gif');
prIm('images/on_kon.gif');
prIm('images/d1.gif');
prIm('images/p1.gif');
prIm('images/h1.gif');
prIm('images/r1.gif');
prIm('images/k1.gif');
prIm('images/d2.gif');
prIm('images/p2.gif');
prIm('images/h2.gif');
prIm('images/r2.gif');
prIm('images/k2.gif');
}
}function prIm()
{
if (document.images)
{
var imgFiles = prIm.arguments;
if (document.prArr==null) document.prArr = new Array();
var i = document.prArr.length;
with (document) for (var j=0; j<imgFiles.length; j++) if (imgFiles[j].charAt(0)!="#")
{
prArr[i] = new Image;
prArr[i++].src = imgFiles[j];
}
}
}function displ(nr, pic)
{
if(document.images) document.images[nr].src = eval("pic");
}
//--></script>
[.....]
<a href="progr01.htm"
OnMouseOver="displ(1,'images/on_pro.gif');displ(5,'images/p1.gif');displ(6,'images/p2.gif')"
OnMouseOut="displ(1,'images/off_pro.gif');displ(5,'images/d1.gif');displ(6,'images/d2.gif')"><img src="images/off_pro.gif" width="134" height="16" alt="Programmierung" border="0"></a>
<a href="hostg01.htm"
OnMouseOver="displ(2,'images/on_hos.gif');displ(5,'images/h1.gif');displ(6,'images/h2.gif')"
OnMouseOut="displ(2,'images/off_hos.gif');displ(5,'images/d1.gif');displ(6,'images/d2.gif')"><img src="images/off_hos.gif" width="60" height="16" alt="Hosting" border="0"></a>
<a href="refer01.htm"
OnMouseOver="displ(3,'images/on_ref.gif');displ(5,'images/r1.gif');displ(6,'images/r2.gif')"
OnMouseOut="displ(3,'images/off_ref.gif');displ(5,'images/d1.gif');displ(6,'images/d2.gif')"><img src="images/off_ref.gif" width="85" height="16" alt="Referenzen" border="0"></a>
<a href="kontk01.htm"
OnMouseOver="displ(4,'images/on_kon.gif');displ(5,'images/k1.gif');displ(6,'images/k2.gif')"
OnMouseOut="displ(4,'images/off_kon.gif');displ(5,'images/d1.gif');displ(6,'images/d2.gif')"><img src="images/off_kon.gif" width=63 height=16 alt="Kontakt" border="0"></a>
[.....]Gruesse
Wilhelm