[JS] Mouse over...

Eliah · 6. Oktober 2004

Hallo zusammen!

Ich habe folgendes Skript und möchte es gerne etwas erweitern. es handelt sich um ein einfaches Mouse over Skript.

Bei diesem Skript wird ein Bild angezeigt (home.jpg) und beim darüberfahren mit der Maus wird es gegen ein weiteres ausgetauscht (home_g.jpg).

Hier mal das Skript:

PHP:

<script LANGUAGE="JavaScript">

browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
if (browserName == "Netscape" && browserVer >= 3 ||
browserName == "Microsoft Internet Explorer" && browserVer >= 4)
compatible = "yes";
else compatible = "no";

toplink1on = new Image;
toplink1on.src = "home.jpg";
toplink1off = new Image;
toplink1off.src = "home_g.jpg";

function img_act(imgName) {
if (compatible == "yes") {
imgOn = eval(imgName + "on.src");
document [imgName].src = imgOn;

}
}

function img_inact(imgName) {
if (compatible == "yes") {
imgOff = eval(imgName + "off.src");
document [imgName].src = imgOff;

}
}

</script>
<a href="http://www.meine-seite.de/fraim.php" target= mainFrame onMouseover="img_act('toplink1')" "window.status="Startseite" ; return true" onMouseout="img_inact('toplink1')"><img src="home_g.jpg" border="0" name="toplink1"></a>

Ich möchte das Skript gerne so anpassen das es möglich ist mehrere Bilder anzuzeigen.
D.h. z.B. das 10 oder mehr Bilder angezeigt werden und beim darrüberfahren mit der Maus es jeweils gewechselt wird.

Kann mir da jemand dabei helfen?
Ich kann mir nicht vorstellen das es allzu schwer ist. Leider haben alle Versuche die ich bist jetzt unternommen habe keinen Erfolg gebracht.

Danke für die Hilfe!

Eliah

GeYe · 6. Oktober 2004

Re: Java Skript - Mouse over...

Code:

<script LANGUAGE="JavaScript">

browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
if (browserName == "Netscape" && browserVer >= 3 ||
browserName == "Microsoft Internet Explorer" && browserVer >= 4)
compatible = "yes";
else compatible = "no";

toplink1on = new Image;
toplink1on.src = "home.jpg";
toplink1off = new Image;
toplink1off.src = "home_g.jpg";

toplink2on = new Image;
toplink2on.src = "bla.jpg";
toplink2off = new Image;
toplink2off.src = "bla_g.jpg";

toplink3on = new Image;
toplink3on.src = "blub.jpg";
toplink3off = new Image;
toplink3off.src = "blub_g.jpg";

function img_act(imgName) {
if (compatible == "yes") {
imgOn = eval(imgName + "on.src");
document [imgName].src = imgOn;

}
}

function img_inact(imgName) {
if (compatible == "yes") {
imgOff = eval(imgName + "off.src");
document [imgName].src = imgOff;

}
}

</script>
<a href="http://www.meine-seite.de/fraim.php" target= mainFrame onMouseover="img_act('toplink1')" "window.status="Startseite" ; return true" onMouseout="img_inact('toplink1')"><img src="home_g.jpg" border="0" name="toplink1"></a> 

<a href="http://www.meine-seite.de/fraim.php" target= mainFrame onMouseover="img_act('toplink2')" "window.status="Startseite" ; return true" onMouseout="img_inact('toplink2')"><img src="home_g.jpg" border="0" name="toplink2"></a> 

<a href="http://www.meine-seite.de/fraim.php" target= mainFrame onMouseover="img_act('toplink3')" "window.status="Startseite" ; return true" onMouseout="img_inact('toplink3')"><img src="home_g.jpg" border="0" name="toplink3"></a>

=> schema erkennen und anwenden ...

lass mich raten, nicht selber geprogged? *G*

=> siehe auch https://www.computerbase.de/forum/threads/hilfe-bei-onmouseover.92499/

Siberian..Husky · 6. Oktober 2004

Re: Java Skript - Mouse over...

bessere wärs wenn du das direkt mit onMouseOver und onMouseOut im img machst.

Eliah · 6. Oktober 2004

Re: Java Skript - Mouse over...

@GeYe:

grins...hast recht. Nicht selber geprogged.

..und vielen Dank für die Hilfe! werde ich gleich mal ausprobieren.

Eliah · 6. Oktober 2004

Re: Java Skript - Mouse over...

Siberian..Husky schrieb:
bessere wärs wenn du das direkt mit onMouseOver und onMouseOut im img machst.

Ahmm....Sorry, kannst Du mir das bitte genauer erklähren?
Wie mache ich das und welche vorteile bringt es?

GeYe · 6. Oktober 2004

Re: Java Skript - Mouse over...

er meint das so ;-) :

Code:

<a href="/index.php?vorlage=neuigkeiten&id=0"
    			onMouseOver="image1.src='bilder/button_neuigkeiten_a.gif';"
    			onMouseOut="image1.src='bilder/button_neuigkeiten_n.gif';">
       <img name="image1" src="bilder/button_neuigkeiten_n.gif" class="bilder" ><img name="spacer" src="bilder/pixel_trans.gif" class="bilder" alt="spacer" width="3" height="1">
       </a>

aber siberian, so hätte er wenigstens gelernt, wie man "hoffentlich" frei verfügbare skripte selber ändern kann.

...

P.S. Gib mir doch wenigstens ein Karmapunkt

Eliah · 6. Oktober 2004

Re: Java Skript - Mouse over...

GeYe schrieb:
P.S. Gib mir doch wenigstens ein Karmapunkt

..ist bereits erledigt. Und Übrigens: Es ist frei verfügbar bzw. editierbar.

Wen ich mir aber so deinen neuen Code anschaue hab ich fast den Verdacht das ich damit keinen Link in einem Frame aufrufen kann.

Ist das so?

EDIT: und ich verstehe immer noch nicht warum der neue Code besser ist...
bzw. was mit "besser ist....direkt mit onMouseOver und onMouseOut im img" gemeint ist...

Siberian..Husky · 6. Oktober 2004

Re: Java Skript - Mouse over...

wenn man es direkt in das img schreibt wie GeYe gepostet hat ist es einfacher, und wenn man einfacher das selbe erreichen kann ist es immer besser

. die version sollte auch mit frames funktionieren.

EDIT: hab mir nochmal den coed angesehen: das geht noch besser *g*. ich hab zwar lange kein javascript mehr gecodet aber eigentlich müsste man das onMouseOver etc. auch direkt in den img tag tuhen können wodurch man dann sowas wie this nutzen kann wodurch wiederum der name wegfallen kann. dann wäre es richtig einfach.

ich hoffe es versteht noch irgendwer was ich schreibe *g*

EDIT2: so ich versuch das ganze mal in code zu fassen

. also:

Code:

<a href="www.bla.de">
    <img src="bilder/button_neuigkeiten_n.gif"
        onMouseOver="this.src='bilder/button_neuigkeiten_a.gif';"
        onMouseOut="this.src='bilder/button_neuigkeiten_n.gif';"
    />
</a>

der code is ungetestet, aber ich glaube so ungefähr müsste das gehen. zumindest mit nem browser der ordentliches javascript versteht...

Eliah · 6. Oktober 2004

Re: Java Skript - Mouse over...

Siberian..Husky schrieb:
...die version sollte auch mit frames funktionieren.

Entschuldige die Frage,, aber WAS muss ich den WO dranhängen um die Bilder mit Links zu versehen welche Seiten in Frames aufrufen....?

GeYe · 6. Oktober 2004

Re: Java Skript - Mouse over...

hm... Eliah ich will ja nicht böse werden, aber kannst du HTML? Hast du mal SELFHTML gelesen? ...

Code:

 <a href="www.bla.de" [B]target="Framename"[/B]>
    <img src="bilder/button_neuigkeiten_n.gif"
        onMouseOver="this.src='bilder/button_neuigkeiten_a.gif';"
        onMouseOut="this.src='bilder/button_neuigkeiten_n.gif';"
    />
</a>

Sollte die Rettung sein

Gobble-G · 6. Oktober 2004

Re: Java Skript - Mouse over...

Hi,

hat das erste (und umfangreichere) Skript nicht den Vorteil, dass die "Highlight"-Bilder schon beim Aufruf der Seite in ein Objekt geladen bzw. gespeichert werden? Somit kommt es zu keinem mglw. langen Nachladen der Bilder, wenn man über die Grafik fährt. Im zweiten Skript würden doch die "Highlight"-Grafiken erst geladen werden, wenn man drüber fährt. Das kann in einem Menü mit vielen solcher Grafiken ganz schön nerven...

Gruß, Gobble-G

GeYe · 6. Oktober 2004

Re: Java Skript - Mouse over...

bei diesem Script kann ich relativ sicher sagen, dass beide aufs gleiche rauslaufen, auch wenn das oben nach mehr Code aussieht. Im Grunde genommen tut es aber auch nicht mehr, als nur den Namen aus dem Javascript zu holen und auch nur bei onMouseOver oder onMouseOut. Du bräuchtest schon einen richtigen Preload, der dir z.B. alle Bilder ausliest und dann lädt. Aber ich bin mir da jetzt nicht 100% sicher, es können sich also noch Leute beschweren

Eliah · 6. Oktober 2004

Re: Java Skript - Mouse over...

GeYe schrieb:
hm... Eliah ich will ja nicht böse werden, aber kannst du HTML?...

oh man, ich hatte wohl Tomaten auf den Augen. Hab glatt die erste Zeile des Skripts übersehen. SORRY!

...und was SELFHTML angeht: Da bin ich drann....

Danke nochmals für die Hilfe!

Siberian..Husky · 7. Oktober 2004

Re: Java Skript - Mouse over...

wenn du ganz sicher willst das es von anfang an geladen wird können wir das fast genauso einfach machen. dazu brauchst du einfach 2 bilder im html code(also 2 imgs) und den css style display:none. danach suchst du dir bei selfhtml raus wie man den style eines objects ändern kann(habe die syntax dazu nicht im kopf) und schon sollte alles funktionieren.

allerdings brauchst du dann wieder namen(da der IE ja DOM nicht so gut versteht...).

EDIT: ich hab noch ne bessere idee

Code:

<a href="www.bla.de" target="Framename">
    <img src="bilder/button_neuigkeiten_n.gif"
        onMouseOver="this.src='bilder/button_neuigkeiten_a.gif';"
        onMouseOut="this.src='bilder/button_neuigkeiten_n.gif';"
    />
    <img style="display:none" width="0px" height="0px" src="bilder/button_neuigkeiten_a.gif" />
</a>

das erste bild wird geladen udn angezeigt, das 2. wird geladen aber niemals angezeigt. dadurch das es aber geladen ist läd der browser es nicht neu wenn du den source des ersten bildes änderst.

Eliah · 7. Oktober 2004

Re: Java Skript - Mouse over...

COOLE Idee! Danke! Werd ich gleich mal ausprobieren und anschliessend meine Ergebnisse posten...

Eliah · 7. Oktober 2004

Re: Java Skript - Mouse over...

@Siberian..Husky,

So ich hab Dein letztes Beispiel mal ausprobiert. Es klappt wunderbar bis auf einen kleinen Schönheitsfehler: Die Bilder werden aus irgendeinem Grund automatisch mit einem Rahmen versehen.

Wen man jetzt das noch beheben könnte währe die Sache echt perfekt....

Vielleicht kann da ja jemand weiterhelfen....

EDIT: leider wird zwischen den einzelnen Bildern auch noch so ein hässliches "Strich unten" Zeichen angezeigt....?!?

pcw · 7. Oktober 2004

Re: Java Skript - Mouse over...

Eliah schrieb:
@Siberian..Husky,

So ich hab Dein letztes Beispiel mal ausprobiert. Es klappt wunderbar bis auf einen kleinen Schönheitsfehler: Die Bilder werden aus irgendeinem Grund automatisch mit einem Rahmen versehen.

Wen man jetzt das noch beheben könnte währe die Sache echt perfekt....

Vielleicht kann da ja jemand weiterhelfen....

EDIT: leider wird zwischen den einzelnen Bildern auch noch so ein hässliches "Strich unten" Zeichen angezeigt....?!?

^^die bilder bekommen den Rahmen, weil sie links sind.

Gib den Bildern mal das Attribut Border="0". Dann sollte der Rahmen verschwinden.

Siberian..Husky · 7. Oktober 2004

Re: Java Skript - Mouse over...

änder mal das img tag hinten so ab: ..... border="0" />. der rahmen um bilder in links is ganz normal. was ein "strich unten" zeichen sein soll weiß ich allerdings nicht. vieleicht die link "unterstreichung"? der ie interpretiert zeilenwechsel leider genauso wie ein leerzeichen. guck dir dazu mal die pseudoformate für links an und stell da text-decoration:none ein, dann sollte der unterstrich weg sein.

Eliah · 7. Oktober 2004

Re: Java Skript - Mouse over...

Jo! Danke an pcw & Siberian..Husky!

Der Rahmen ist weg.

Und das mit dem "_" ist wirklich ein Fehliterpretation vom IE. Mit Firefox sieht alles korekt aus.

Ich versuche gerade "text-decoration:none" einzupflegen....mal sehen was passiert

pcw · 7. Oktober 2004

Re: Java Skript - Mouse over...

Siberian..Husky schrieb:
der ie interpretiert zeilenwechsel leider genauso wie ein leerzeichen.

ist das Problem nicht viel eher, dass im Quelltext tatsächlich Leerzeichen vorhanden sind?
Nämlich jene, die den Text einrücken... für die übersichtlcihe Formatierung..?

[JS] Mouse over...

Cadet 4th Year

Lt. Junior Grade

Lt. Commander

Cadet 4th Year

Cadet 4th Year

Lt. Junior Grade

Cadet 4th Year

Lt. Commander

Cadet 4th Year

Lt. Junior Grade

Lieutenant

Lt. Junior Grade

Cadet 4th Year

Lt. Commander

Cadet 4th Year

Cadet 4th Year

Lt. Commander

Lt. Commander

Cadet 4th Year

Lt. Commander

Ähnliche Themen