Script auslagern

gagern

Hallo zusammen,

bin kein Programmierer, sondern eher Bastler. daher eine Frage, die für Profis wahrschenlich einfach zu beantworten ist.

Ich möchte beim Mouseover über einen Menüpunkt ein Bild direkt unter dem Menü (kein Menübild) wechseln.

Das klappt mit folgendem Code in der header.php auch prima ("hidepics" sorgt fürs Vorladen des zweiten Bildes, ohne dass es zunächst sichtbar ist):

HTML

<script>
$('li.menu-item-75').mouseover(function() {
    $('div.image') .html('<img src="http://xy.de/wp-content/uploads/2013/11/bild1.jpg" />');
    $('div.sheet') .css("background-color","#EDF2F2");
});
$('li.menu-item-76').mouseover(function() {
    $('div.image') .html('<img src="http://xy.de/wp-content/uploads/2013/11/bild2.jpg" />');
    $('div.sheet') .css("background-color","yellow");
});
</script>
<div class="image"><img alt="" src="http://xy.de/wp-content/uploads/2013/11/bild1.jpg" title=""></div>
<div class="hidepics"><img alt="" src="http://xy.de/wp-content/uploads/2013/11/bild2.jpg" title=""></div>

Alles anzeigen

Jetzt habe ich aber versucht, den Script-Code in eine js-Datei auszulagern und diese mit

HTML

<script type='text/javascript' src='http://xy.de/wp-content/themes/mytheme/hover.js'></script>

im Head-Bereich zu laden. Dann klappt das Ganze allerdings nicht mehr.

Was mache ich falsch?

Gruß
Gagern

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Melewo

jQuery ist nicht so mein Ding, doch allgemein würde ich so etwas in den Footer verschieben, damit li.menu-item-75 und 76 im DOM existieren, bevor ein möglicher Aufruf erfolgen kann. Bei WP ist es zuweilen auch ratsam eine Funktion nicht mit $ sondern mit

Code

jQuery('li.menu-item-75').mouseover(function() {

zu beginnen. Innerhalb der Funktion kann dann wieder $ benutzt werden.

Hier mal ein praktisches Beispiel mit mouseover, meine das zweite auf der Seite, ist jetzt normales JavaScript und kein jQuery, wobei das Element mit der Id categories-2 noch nicht zum Ende des Artikels im DOM existiert, die Sidebar kommt ja im Quelltext erst unterhalb des Artikels:

Code

var bereich = document.getElementById("categories-2");

http://www.coder-welten.com/event-tracking/

Damit der Code nun dennoch funktioniert, konnte ich das Script nicht am Ende des Artikels einfügen, sondern musste dieses in den Footer verschieben.

g3h

Hi,
Versuch mal folgendes:

PHP

<?php wp_enqueue_script( 'hover',  get_stylesheet_directory_uri() . '/hover.js' ); ?>

in die footer.php

und deine Datei sollte so aussehen:

Code

(function($){


$('li.menu-item-75').mouseover(function() {
    $('div.image') .html('[COLOR=#800080]<img src=[COLOR=#0000FF]"http://xy.de/wp-content/uploads/2013/11/bild1.jpg"[/COLOR] />[/COLOR]');
    $('div.sheet') .css("background-color","#EDF2F2");
});
$('li.menu-item-76').mouseover(function() {
    $('div.image') .html('[COLOR=#800080]<img src=[COLOR=#0000FF]"http://xy.de/wp-content/uploads/2013/11/bild2.jpg"[/COLOR] />[/COLOR]');
    $('div.sheet') .css("background-color","yellow");
});


})(jQuery);

Alles anzeigen

MfG

gagern

Ok, danke Euch beiden. Werde es erst Montag ausprobieren können und dann berichten.

Grüße

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Script auslagern

Jetzt mitmachen!