Need help to finish disjointed rollover

[deonholt]

Hi there.
I really feel like I am in a coding jungle.

Example from my one site:
http://www.lovolengines.co.za/range.php
The rollover of the images to the left of the buttons seems to work with JS.

My other site:
http://www.lovolengines.co.za/range.php

The buttons’ rollover work 100% and is CSS. But, for some reason I cannot get the rollover of the images to work. I am not a coder and have copied everything I think the rollover uses from my one site to my other site; Joomla. As far as I can tell, all files necessary are linked correctly … but then maybe not, since it is not working.

I am sure that it is just something small and will really appreciate your help.

Best Regards, Deon.

[Paulie_D]

The menu seems to be working for me in Chrome. The link bg images change and the engines appear as expected.

When you refer to ‘image rollover’ I assume you AREN’T taking about the menu images.

If it’s the ‘engine’ images, what are they supposed to do on rollover?

BTW…your two links are the same.

[deonholt]

Sorry, the links are not supposed to be the same. In the example you have viewed, the engines are supposed to rollover together with the buttons. In other words: when button to the right is on 1004TG, the image of a 1004TG engine is supposed to show.

Here’s the link to the site I’m battling with:
http://gensettraders.co.za/index.php/link/link-4/link-4-1

I really appreciate your help.

[Paulie_D]

On the exisiting site it’s all handled by javascript (Jquery actually) …in the functions.js file.

//DISJOINTED ROLLOVERS USING BUTTON NAVIGATION AND IMAGES FADING IN AND OUT

$(document).ready(function(){
//disjointed rollover function starting point
$("div#button li").hover(function(){
    //make a variable and assign the hovered id to it
    var elid = $(this).attr('id');
    //hide the image currently there
    $("div#images div").hide();
    //fade in the image with the same id as the selected buttom
    $("div#images div#" + elid + "").fadeIn("slow");

    });

});

As far as I can see that file is referenced in your page but not actually included in the appropriate folder of your ‘development’ site.

If you are using the same HTML & CSS then there is your answer.

[deonholt]

Thank you for the reply.

Just for me to make sure I understand your reply correctly: Does this mean that functions.js is not found and therefor not read by the page even though it is referenced?

Deon

[deonholt]

Hi again.

I am sure now that jquery.js is linked to my page. But, still it does not work. Is there anything else I can look for?

Regards,
Deon

[Paulie_D]

Does this mean that functions.js is not found and therefore not read by the page even though it is referenced?

When I posted….yes!

[deonholt]

Ok, I see now what you mean. When I click on the link in the source code of the page, I get an error 404 telling me that the page is not found.

I will check my code out again.
Thank you for your time & help.

[deonholt]

SOLVED

The module I use to link the js-files to the page, references that files wrong.
The module makes the page point to http://gensettraders.co.za/template/ewa14062013/js/functions.js in stead of http://gensettraders.co.za/templates/ewa14062013/js/functions.js

I have contacted the developer of the script and ask to fix the module. The CSS-file is linked correctly and points to …./templates/….

Thank you once again for your time and help.
Best Regards,
Deon

[Author]

Posts