nicht angemeldet
onMouseOver und andere Spielerein....
Hallo Forumleser/innen ;-),
Für ein derzeitiges Project hab ich eine Umgestaltung einer Website vorgenommen, diese Website bestand so gut wie nur aus Frame-sets. Da mir das Updaten zu umständlich war (wenn ein menüpunkt hinzukamm mußte man ca. 40-50 Seiten ändern), hab ich das ganze mittels JavaScript umprogrammiert. Jetzt kommt es mit einem Frameset aus. Gut, soweit zur vorgeschichte, im Prinzip ist das folgende nur eine verknüpfung von einigen bekannten Scripts.
Der JavaScript teil:
------------CUT----------------
<script language = "javascript">
<!--
// Der Browser wird abgefragt
browser=0
if (navigator.userAgent.substring(0,9) == "Mozilla/3")
{browser=1}
if (navigator.userAgent.substring(0,9) == "Mozilla/4")
{browser=1}
if (browser == 1)
// Der sicher schon bekannte Image preload
{
var bildan = new Array();
var bildaus = new Array();
var bildclick = new Array();
bildan[0] = new Image();
bildan[0].src = "/images/mmr_ani.gif";
bildaus[0] = new Image();
bildaus[0].src = "/images/mmr_ani.gif";
bildclick[0] = new Image();
bildclick[0].src = "/images/mmr_ani.gif";
// und viele andere Buttons mehr........
bildan[7] = new Image()
bildan[7].src = "/images/maintool/main_7b.gif";
bildaus[7] = new Image();
bildaus[7].src = "/images/maintool/main_7a.gif";
bildclick[7] = new Image();
bildclick[7].src = "/images/maintool/main_7b.gif";
}
// so alle bilder wurden definiert und von 0-n durchnummeriert
var geklickt = null;
// die funktionen:
function an(i)
// onmouseover= image rollover an
{
if (browser == 1)
{
if (geklickt != i)
document.images[i].src=bildan[i].src;
}
}
function aus(i)
// onmouseout= image rollover aus
{
if (browser == 1)
{
if (geklickt != i)
document.images[i].src = bildaus[i].src;
}
}
function klick(i,a,b,c,d,e,f,g,h) // für jeden button ein buchstabe von a - z (natürlich ohne i :-)
// onclick= Ein button wurde gedrückt i ist die zahl des buttons welcher gedrückt wurde diesem wird die grafik blidclick[n] zugwiesen, alle anderen buttons kommen wieder auf die ausgangsstellung
{
if (browser == 1)
{
if (geklickt != i)
{
document.images[i].src = bildclick[i].src;
document.images[a].src = bildaus[a].src;
document.images[b].src = bildaus[b].src;
document.images[c].src = bildaus[c].src;
document.images[d].src = bildaus[d].src;
document.images[e].src = bildaus[e].src;
document.images[f].src = bildaus[f].src;
document.images[g].src = bildaus[g].src;
document.images[h].src = bildaus[h].src;
}
}
geklickt = i;
}
function loadnew(x) {
// onclick=
if (document.all){
x.blur();
}
}
function ZweiFrames(URL1,URL2)
// href= die orginal (naja fast) Selfhtml "ändere zwei frames mit einem Klick" funktion
{
parent.frames.up.location.href=URL1;
parent.frames.main.location.href=URL2;
}
function message(txt){
// onmouseover= status leisten text an
window.status = txt;
setTimeout("remove_message()",5000);
}
function remove_message(){
// onmouseout= status leisten text aus
window.status="";
}
--->
</script>
----------- CUT --------------
So das waren mal die JavaScript funktionen. Kleine Anmerkung ich bin ein gegner von Statusleisten spielerein, aber wenn es sich der kunde nicht ausreden lässt :(
die Links werden jetzt etwas komplizierter, ich hab mal sicherheitshalber alle hingeschrieben:
----------- CUT --------------
<p><a href="javascript:ZweiFrames('/oben.1.html','/main.1.html')" onClick="klick(0,1,2,3,4,5,6,7,8);loadnew(this)" onMouseOver="an(0);message('Seite 1');return true;" onMouseOut="aus(0);remove_message();"><IMG SRC="../images/mmr_ani.gif" BORDER=0 name="a"></A>
<p><a href="javascript:ZweiFrames('/oben.2.html','/main.2.html')" onClick="klick(1,0,2,3,4,5,6,7,8);loadnew(this)" onMouseOver="an(1);message('Seite 2');return true;" onMouseOut="aus(1);remove_message();"><img src="../images/maintool/main_1a.gif" name="b" border="0"></a>
<p><a href="javascript:ZweiFrames('/oben.3.html','/main.3.html')" onClick="klick(2,1,0,3,4,5,6,7,8);loadnew(this)" onMouseOver="an(2);message('Seite 3');return true;" onMouseOut="aus(2);remove_message();"><img src="../images/maintool/main_2a.gif" name="c" border="0"></a>
<p><a href="javascript:ZweiFrames('/oben.4.html','/main.4.html')" onClick="klick(3,1,2,0,4,5,6,7,8);loadnew(this)" onMouseOver="an(3);message('Seite 4');return true;" onMouseOut="aus(3);remove_message();"><img src="../images/maintool/main_3a.gif" name="d" border="0"></a>
<p><a href="javascript:ZweiFrames('/oben.5.html','/main.5.html')" onClick="klick(4,1,2,3,0,5,6,7,8);loadnew(this)" onMouseOver="an(4);message('Seite 5');return true;" onMouseOut="aus(4);remove_message();"><img src="../images/maintool/main_4a.gif" name="e" border="0"></a>
<p><a href="javascript:ZweiFrames('/oben.6.html','/main.6.html')" onClick="klick(5,1,2,3,4,0,6,7,8);loadnew(this)" onMouseOver="an(5);message('Seite 6');return true;" onMouseOut="aus(5);remove_message();"><img src="../images/maintool/main_5a.gif" name="f" border="0"></a>
<p><a href="javascript:ZweiFrames('/oben.7.html','/main.7.html')" onClick="klick(6,1,2,3,4,5,0,7,8);loadnew(this)" onMouseOver="an(6);message('Seite 7');return true;" onMouseOut="aus(6);remove_message();"><img src="../images/maintool/main_6a.gif" name="g" border="0"></a>
<p><a href="javascript:ZweiFrames('/oben.8.html','/main.8.html')" onClick="klick(7,1,2,3,4,5,6,0,8);loadnew(this)" onMouseOver="an(7);message('Seite 8');return true;" onMouseOut="aus(7);remove_message();"><img src="../images/maintool/main_7a.gif" name="h" border="0"></a>
<p><a href="javascript:ZweiFrames('/oben.9.html','/main.9.html')" onClick="klick(8,1,2,3,4,5,6,7,0);loadnew(this)" onMouseOver="an(8);message('Seite 9');return true;" onMouseOut="aus(8);remove_message();"><img src="../images/maintool/main_8a.gif" name="i" border="0"></a>
----------- CUT --------------
Am interessantesten ist natürlich der onclick aufruf das ganze läuft immer nach dem selben schema. man numeriert von 0-8 (in diesem fall) durch. Das ist die zahl die nachher beim klicken i ist, also die ausgetaust wird. Die "0" wandert dann immer eines nach rechts, und ersetzt die zahl die an erster stelle steht, dann gehts wieder normal weiter.
Noch ein kleiner "hint" am rande, diese Script "Zählt" die bilder von oben nach unten, also für bilder die übern den links stehen, muss genauso die funktion aufgerufen werden.
Copyrights: Keines der oben angeführten skripte ist ausschliesslich von mir :-) ich habe nur die Skritpen stellenweisse etwas angepasst und zusammengeführt. Das onclick= skript stammt von Michael Mailer's JavaScript sammlung (http://www.webaid.de/js/) die zweiFrames funktion stammt ursprünglich aus selfhtml (soll ich hier auch nen link angeben *g*)
Vielleicht kann das Skriptchen ja wer brauchen. wer sich das ganze in aktion ansehen will kann bei http://195.230.46.67/ vorbeischaun.
lg
Ludwig
PS: ich habe diese nachricht nur ins forum kopiert, ich hoffe das die zeilenumbrüche beim rauskopiern noch funktioniern :-)
-
Funktioniert das Frame tauschen auch in IE3 WIN?
Bei mir ist nämlich das Problem dass das Beispiel aus Selfhtml nicht in IE3 läuft da sich Ie3 nicht die Pfade merkt.