SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Oct 2002
    Posts
    229
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multiple Javascript mouse overs

    Hello,

    I have a large image which does various mouseover image swaps. I have got this working fine with just one image swap but it does not seem to allow two simultaneous image swaps displaying two images at different locations.

    It works for just one mouseover with :
    <area shape="rect" coords="229,189,323,249" onmouseover="divup('cus',229,189,0,0,1)">


    I have tried this for two mouseovers but this doesnot work: <area shape="rect" coords="134,11,227,70" onmouseover="divup('depcon',133,11,0,0,1); divup('depsec',250,11,0,0,1)">


    Each div is difned as :
    <div id="depcon" style="visibility:hidden;top:0;left:0;width:95px;height:113px;z-index:3;position:absolute" onmouseout="divdown('depcon')">
    <img src="/__802569EB00548630.nsf/vWeb/flKCON5N7HXP/$file/presentation-departure-concourse-mouseover.gif" alt="" hspace="0" vspace="0" border="0" usemap="#depconmap">
    </div>


    I am wondering if it is something to do with the attached Js file. As I do not know much javascript I was wondering if anyone could advise me on this.

    The JS FIle is :

    var baseImageState = 0;
    var LastDivUp = 0;

    function getEl(id) {
    if (document.all) {
    return document.all.item(id);
    }
    }

    function divup(id, x, y, s1, s2, s3) {
    if (LastDivUp != 0) {
    divdown(LastDivUp);
    }
    if ((baseImageState == 0) ||
    (s1 && baseImageState == 1) ||
    (s2 && baseImageState == 2) ||
    (s3 && baseImageState == 3)) {
    if (document.all) {
    var popupEl = getEl(id);
    if (popupEl != null) {
    var baseEl = getEl('base');
    popupEl.style.left = x + baseEl.offsetLeft;
    popupEl.style.top = y + baseEl.offsetTop;
    popupEl.style.visibility = "visible";
    LastDivUp = id;
    }
    }
    }
    }

    function divdown(id) {
    if (document.all) {
    var popupEl = getEl(id);
    if (popupEl != null) {

    popupEl.style.visibility = "hidden";
    LastDivUp = 0;
    }
    }
    }

    function hilite (id,x,y) {
    if (LastDivUp != 0) {
    divdown(LastDivUp);
    }

    if (document.all) {
    var popupEl = getEl(id);
    if (popupEl != null) {
    var baseEl = getEl('base');
    popupEl.style.left = x + baseEl.offsetLeft;
    popupEl.style.top = y + baseEl.offsetTop;
    popupEl.style.visibility = "visible";
    LastDivUp = id;


    }
    }
    }




    All help greatly appreciated
    Eternity

  2. #2
    SitePoint Addict
    Join Date
    Mar 2002
    Posts
    327
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    [If I read you correctly, you want to change images in two different places using a single mouse click. I think you need to access all the images using a collection array such as:-

    <form>
    <a href="dumy.htm"
    onmouseout="window.document.images[0].src='gif1.gif'"
    onmouseover="window.document.images[0].src='gif2.gif'"
    onclick="return false"><img src="jestbut.gif" border="0"
    width="138" height="37"></a>
    </form>

    or something similar where [0] is the first image in the page. Hope this helps.

    Nick
    All4YourPC for all your PC needs. Custom software.
    Websites. Web marketing. Training.
    http://members.aol.com/nickjc67


Bookmarks

Posting Permissions

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