WordPress kan mijn menu onderdelen niet een aparte javascript meegeven

[AstridBerkhout]

<ul class="nav">
<li class="b"><a href="index.html" onMouseOver="MM_swapImage('id_deze_image_veranderd','','img/header/home.jpg',1)" onMouseOut="MM_swapImgRestore()">HOME</a></li>
<li class="a"><a href="wiezijnwij.html" onMouseOver="MM_swapImage('id_deze_image_veranderd','','img/header/wiezijnwij.jpg',1)" onMouseOut="MM_swapImgRestore()">WIE ZIJN</a></li>
<li class="b"><a href="productieproces.html" onMouseOver="MM_swapImage('id_deze_image_veranderd','','img/header/productieproces.jpg',1)" onMouseOut="MM_swapImgRestore()">PRODUCTIE</a></li>
<li class="a"><a href="producten.html" onMouseOver="MM_swapImage('id_deze_image_veranderd','','img/header/produkten.jpg',1)" onMouseOut="MM_swapImgRestore()">PRODUCTEN</a></li
</ul>

Dit is mijn oorspronkelijke code. Maar nu ik deze site ombouw in WordPress kan ik geen swapImage voor een andere div meegeven omdat het menu met een enkele code word opgeroepen. Namelijk: <?php wp_nav_menu($args); ?>

Ik zou wel via een class alles kunnen aansturen door:
.sidebar1 li:nth-child(1) a:hover {background:#CCCC00;}
.sidebar1 li:nth-child(2) a:hover {background:#99CC00;}
.sidebar1 li:nth-child(3) a:hover {background:#000;}
.sidebar1 li:nth-child(4) a:hover {background:#f00;}
.sidebar1 li:nth-child(5) a:hover {background:#ff0;}

maar kan dan geen andere div aanwijzen. Heeft voor iemand voor mij een oplossing?

Bedankt!

 

[Robin S]

Hoi

Je kunt ook mouseover- en mouseout-listeners toevoegen met JavaScript. Bekijk de inhoud van deze main-functie maar eens:
[JS]function addEvent(obj, type, callback, useCapture) {
if (obj.addEventListener) {
obj.addEventListener(type, callback, useCapture);
}
else if (obj.attachEvent) {
obj.attachEvent("on" + type, callback);
}
else {
obj["on" + type] = callback;
}
}

function main() {

var div = document.getElementById("someDiv");
addEvent(div, "mouseover", function() {
MM_swapImage("id_deze_image_veranderd", "someImage.jpg", 1);
}, false);
addEvent(div, "mouseout", MM_swapImgRestore, false);

}[/JS]
Belangrijk is wel dat de elementen waaraan je die listeners toevoegt, al geladen zijn. Om te wachten tot de pagina geladen is voor je main uitvoert:
[JS]addEvent(window, "load", main, false);[/JS]

Als er nu een <div id="someDiv"> op je pagina staat, zal die ook reageren op mouseover- en mouseout-events.

Gr. Robin

 

[AstridBerkhout]

Hoi Robin,
Bedankt voor het meedenken. In mijn code van de oude site zie je dat iedere list een ander plaatje bovenin aanroept. Aangezien WordPress het menu als geheel binnen haalt kan ik er niet zo veel meer mee. Ik heb nu het bestand 'nav-menu-template.php' veranderd in mijn theme onder wp-include. En daar een javascript ingezet met een steeds nieuwe ID. Mijn plaatjes heb ik vernoemd naar deze diverse ID's. Hieronder staat het stukje code:

$item_output = $args->before;
$item_output .= '<a'. $attributes . ' onMouseOver=MM_swapImage(\'olijfolie\',\'\',\'http://www.x-tensionatwork.nl/valderramanl/wordpress/wp-content/themes/BLANK-Theme/olijfolie_img/header/'. $item->ID .'.jpg\',1) onMouseOut=MM_swapImgRestore() ' .'>';
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
$item_output .= '</a>';
$item_output .= $args->after;

Volgens mij best creatief maar het werkt!