two scripts interfering?

[radiofriendlybox]

please refer to: www.32-bits.com/dd_test

in example 1 you will see that by clicking on the yellow images (spice, ketchup, bottle and apple), the center div slides up/down to hide/reveal new information. that is a function of a scriptaculous script called "divswap.js"

in example 2 you will see that by mousing over the yellow images, an image-swap occurs on the kitchen counter top. clicking on a yellow image causes the text-image to stay put, yet mousing over the remaining yellow images will still produce an image swap. this is a function of the script "stayimage2.js" that i found online.

the problem is that with example 2, after having added the image swap script to the html, the div swap script (as seen in example 1) no longer works. i'm guessing that it's because the inline function of the onclick that calls the divswap is being bypassed.

can someone show me how to fix this? i know next to nothing about js unless it's painfully obvious. you can find the scripts at www.32-bits.com/dd_test/js

thanks!

[Felix Riesterer]

Greetings from Germany!

in example 2 you will see that by mousing over the yellow images, an image-swap occurs on the kitchen counter top.

Why should you need JavaScript for the effect of the second example? In my opinion this could also be achieved by a purely CSS-based solution! In addition I'd provide basic funtionality even if JavaScript is turned off. This leads me to the following ideas:

* Use an IFrame to display the texts and put them into extra HTML files
* Use a target attribute inside the hyperlinks to make the IFrame load the texts
* Use a transitional doctype (required - and already in use by your examples)
* Use CSS to swap the images

I'm thinking along the lines of something like this:

<p><img src="kitchen.gif" alt="" id="kitchen" />
    <!-- here go the several links... just one as an example now -->
    <a href="adams_story.html" target="grey_box" onclick="return showText(this)">
        <img src="heinz.gif" alt="" id="adam" />
        <img src="adam.gif" alt="Adam's Story" class="swap" />
    </a>
<p>
<iframe src="" name="grey_box" id="grey_box" />

Now the second image inside the link can be made display:none as default and can be made visible on hovering the link:

#adam { /* ketchup bottle */
    display: block;
    position: absolute;
    left: 260px;
    top: 40px;
}

a .swap { /* any explanatory text image */
    display: none;
    position: absolute;
    z-index: 2; /* must overlap a permanently displayed image */
    top: 319px;
    left: 75px;
}

a:hover .swap { /* any visible explanatory text image */
    display: block;
}

This way the second image will disappear on moving the mouse away from the link and won't stay if the link has been focussed. The function "showText(this)" can now display the swapped image permanently according to the displayed text. It needs a reference to the <a> Element in order to not display the text prior to its "closing" animation and to make the swap image to now show permanently. Look at this:

// THIS CODE HAS NOT BEEN TESTED!!!
function showText (linkElement) {
    // get all swap images and hide them (again)
    var a = document.getElementsByTagName("a"), i, imgs;
    for (i = 0; i < a.length; i++) {
        imgs = a[i].getElementsByTagName("img");
        if (imgs[1] && imgs[1].className == "swap") {
            imgs[1].style.zIndex = "";
            imgs[1].style.display = "";
        }
    }

    // animate_box("close"); // replace this with your functionality

    document.getElementById("grey_box").src = linkElement.href; // load text into iframe

    // animate_box("re-open"); // replace this with your functionality

    i = linkElement.getElementsByTagName("img")[1]; // permanently show swap image
    i.style.display = "block";
    i.style.zIndex = "1";

    return false; // prevent original browser reaction on clicking a link
}

Mind that in some cases I have used IDs rather than classes. Whenever something can't occur more than once on a page using an ID seems more suitable to me than using a class. This of course affects some syntax in your CSS code.

Hope this helps a bit...

Felix Riesterer.

[radiofriendlybox]

Greetings from Germany!



Why should you need JavaScript for the effect of the second example? In my opinion this could also be achieved by a purely CSS-based solution! In addition I'd provide basic funtionality even if JavaScript is turned off. This leads me to the following ideas:

* Use an IFrame to display the texts and put them into extra HTML files
* Use a target attribute inside the hyperlinks to make the IFrame load the texts
* Use a transitional doctype (required - and already in use by your examples)
* Use CSS to swap the images

I'm thinking along the lines of something like this:

<p><img src="kitchen.gif" alt="" id="kitchen" />
    <!-- here go the several links... just one as an example now -->
    <a href="adams_story.html" target="grey_box" onclick="return showText(this)">
        <img src="heinz.gif" alt="" id="adam" />
        <img src="adam.gif" alt="Adam's Story" class="swap" />
    </a>
<p>
<iframe src="" name="grey_box" id="grey_box" />

Now the second image inside the link can be made display:none as default and can be made visible on hovering the link:

#adam { /* ketchup bottle */
    display: block;
    position: absolute;
    left: 260px;
    top: 40px;
}

a .swap { /* any explanatory text image */
    display: none;
    position: absolute;
    z-index: 2; /* must overlap a permanently displayed image */
    top: 319px;
    left: 75px;
}

a:hover .swap { /* any visible explanatory text image */
    display: block;
}

This way the second image will disappear on moving the mouse away from the link and won't stay if the link has been focussed. The function "showText(this)" can now display the swapped image permanently according to the displayed text. It needs a reference to the <a> Element in order to not display the text prior to its "closing" animation and to make the swap image to now show permanently. Look at this:

// THIS CODE HAS NOT BEEN TESTED!!!
function showText (linkElement) {
    // get all swap images and hide them (again)
    var a = document.getElementsByTagName("a"), i, imgs;
    for (i = 0; i < a.length; i++) {
        imgs = a[i].getElementsByTagName("img");
        if (imgs[1] && imgs[1].className == "swap") {
            imgs[1].style.zIndex = "";
            imgs[1].style.display = "";
        }
    }

    // animate_box("close"); // replace this with your functionality

    document.getElementById("grey_box").src = linkElement.href; // load text into iframe

    // animate_box("re-open"); // replace this with your functionality

    i = linkElement.getElementsByTagName("img")[1]; // permanently show swap image
    i.style.display = "block";
    i.style.zIndex = "1";

    return false; // prevent original browser reaction on clicking a link
}

Mind that in some cases I have used IDs rather than classes. Whenever something can't occur more than once on a page using an ID seems more suitable to me than using a class. This of course affects some syntax in your CSS code.

Hope this helps a bit...

Felix Riesterer.

i actually found a way to work around my original problem, but i will give this a try too to see how it works. thanks!