Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Rollover and changing image src with an onClick event

    Hi

    I am trying to stop a preloaded images used in a rollover. The images are linked to a tab navigation system, that open on the same page.

    if(document.images){
    var image_array = new Array();
    // path to the directory with images
    var path = './images/food-drink/food/';
    // enumeration of the "active" images
    image_array[0] = path + "starters_r.png";
    image_array[1] = path + "mains_r.png";
    image_array[2] = path + "desserts_r.png";
    image_array[3] = path + "childrens_r.png";
    image_array[4] = path + "sandwiches_r.png";
    image_array[5] = path + "meal_r.png";
    var preload_image = new Array ();
    for(var i=0; i<image_array.length; i++){
    preload_image[i]= new Image();
    preload_image[i].src = image_array[i];
    }
    }

    function rollover(name, filename){
    var fullpath = './images/food-drink/food/' + filename;
    document.images[name].src = fullpath;
    }

    I am trying to change the image with another one, which will change back when a different image is clicked.

    The problem seems to be that the tab navigation code is disagreeing with other code I have tried. The tab code looks like this and works fine until I add another code with document.getElementById() to the onClick event.

    function swichtabs(wert) {
    if (wert=='1'){ /*menu starters tab*/
    document.getElementById('tabStarters').className='tab1 tabactive';
    document.getElementById('tabMains').className='tab2';
    document.getElementById('tabDesserts').className='tab3';
    document.getElementById('tabChildrens').className='tab4';
    document.getElementById('tabSandwiches').className='tab5';
    document.getElementById('tabMeals').className='tab6';
    }else if (wert=='2'){
    etc...

    The html code for the image is:

    <a href="#starters"
    onmouseout="rollover('btnStarters','starters.png')"
    onmouseover="rollover('btnStarters','starters_r.png')"
    onClick="this.onMouseOver=null;this.onMouseOut=null;
    blendon('starters');
    blendoff('mains');etc...;
    swichtabs('1');" onclick="return false;" title="Starters"
    id="tabStarters">
    <img src="./images/food-drink/food/starters.png" name="btnStarters" width="129" height="30" border="0" />
    </a>

    I would be grateful if you could point me in the right direction.

  • #2
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    908
    Thanks
    0
    Thanked 120 Times in 119 Posts
    (Remember to enclose your coding in [CODE][/CODE] tags)

    you have 2 onclicks on your image:
    Code:
    onClick="this.onMouseOver=null;this.onMouseOut=null;
    blendon('starters');
    blendoff('mains');etc...;
    swichtabs('1');"
    and
    Code:
    onclick="return false;"
    Bad coding !!!

    And this.onMouseOver=null;this.onMouseOut=null; only (if anything) disables the triggers for future mouse movements, but are unnecessary here.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •