Question

I have a rotating banner that I need to add links to example. Below is part of the js code. My problem getting the href to work in the index.php page.

function change_banner(){

data=xmldata[changenum];                    //get current banner XML object 

img=$(data).attr("src");                    //retrieve variables
href=$(data).attr("href");
target=$(data).attr("target");

$(".banner_img_href").attr("href",href);        //change variables on HTML
$(".banner_img_href").attr("target",target);
$("#banner_image").attr("src",img);

This is the html:

<div class="banner">
    <div class="banner_text">
        <img src="images/banner_text.png">
    </div>
    <div class="banner_img">
         <img   border='0' src="images/banner_gas.png" id='banner_image' alt='Banner Image' />
    </div>
</div>     

I have tried basic linking but no dice. Not sure where I am going wrong with this.

Thank you,

B Graves

Answer 1

I know you said you tried basic linking, but the following html should work:

<div class="banner">
    <div class="banner_text">
        <a class="banner_img_href" href="http://someurl.com">
            <img src="images/banner_text.png">
        </a>
    </div>
    <div class="banner_img">
         <a class="banner_img_href" href="http://someurl.com">
             <img border='0' src="images/banner_gas.png" id='banner_image' alt='Banner Image' />
         </a>
    </div>
</div>

JavaScript:

function change_banner(){

    data=xmldata[changenum];                    //get current banner XML object 

    img=$(data).attr("src");                    //retrieve variables
    href=$(data).attr("href");
    target=$(data).attr("target");

    $(".banner_img_href").attr("href",href);        //change variables on HTML
    $(".banner_img_href").attr("target",target);
    $("#banner_image").attr("src",img);
}

In your code, you didn’t have any element with the class banner_img_href, so the href attribute wasn’t actually being set on any element.

If this doesn’t work, I would verify that your data actually contains a valid url for the href, and that you’re able to retrieve it (use the developer tools in a browser to set a breakpoint and check the value, or output the value to the JavaScript console with console.log(href)).

EDIT: I just checked how you’re getting the data and the format of the data. Your XML file should probably formatted differently like this:

<gallery fade="500" ontime="5000">
    <picture src="images/banner_gas.png" href="desiccant-dryers-air-dryers.php" />
    <picture src="images/banner_liquid.png" href="backwashing-sand-filters.php" />
    <picture src="images/banner_mis.png" href="air-cooled-chillers-explosion-preventers.php" />
</gallery>

The problem is with the way you are getting the data, and the format of the data. If you format the xml file as above, it should work fine.