Skip to main content
T
trojnfn
Inspiring
September 10, 2007
Answered

A little off topic....but

  • September 10, 2007
  • 1 reply
  • 765 views
I have a cfform that displays an image and I have an image map to do rollovers. Here is the code :

<img src="safety_logo_1.gif" usemap="#safety_logo_map" border="0">

Now I need to add more images and make them randomly display, with each still using the map for rollovers. I found the javascript to do this and part of the image commands is displayed below. It works great. But how would I incorporate the image map commands into the code ? I tried to just add them but obviously did it wrong, and the image does not show up. Anybody know how I can do this ?

Thanks


theImages[0] = '"safety_logo_1.gif"
theImages[1] = 'safety_logo_2_test.gif'
theImages[2] = 'safety_logo_3_test.gif'
theImages[3] = 'safety_logo_4_test.gif'
    This topic has been closed for replies.
    Correct answer Newsgroup_User
    You confirmed that a static version of this works, now lets see why the
    dynamic is not working.

    Run the dynamic code and look at the source in the browser. Are you
    getting the expected output in the <img ...> tag? If not, what are you
    getting? If it is expected, what does it look like?


    "My test image labeled number 3 is on the screen. The usemap does not
    have the # in front of it. Is that the problem, or something else ?
    Also, why doesn't your script code show up in the source code ? "


    CFML is processed on the server, it is not sent to the client, just the
    results are sent. That is the benefit of the ColdFusion version. It
    picks one random image and then that one file is sent to the client.
    With the JavaScript version all 5 images are sent to the client using up
    5 times the bandwidth and making the page that much longer to load just
    to ignore 4 of them that the user will never see during that request.

    Yes you need the # symbol as part of your image tag. It is part of the
    usemap syntax is it not.

    <cfoutput>
    <img src="#images[imgPick].src#" usemap="##safety_logo_map"/>
    </cfoutput>

    OR

    document.write('<img src="'+theImages[whichImage]+'"
    usemap="#safety_logo_map">');

    Note that the CFML version has two ## symbols. This is to escape the
    symbol and send one to the client, otherwise CFML thinks you are trying
    to designate a variable. You need to do this anytime you want to output
    a # symbol inside a <cfoutput...> block.

    Now when you want to use a variable in the CFML version for when you are
    using different usemaps it will look like this, lots of # symbols.

    <cfoutput>
    <img src="#images[imgPick].src#" usemap="###images[imgPick].usemap#"/>
    <cfoutput>



    1 reply

    N
    Newsgroup_User
    Inspiring
    September 10, 2007
    You did not show the necessary part of the javascript. Somewhere in the
    JS code there is something the changes the "src" property of the given
    <img...> DOM node. At that point you would also be able to change the
    "usemap" property of the same node.

    T
    trojnfnAuthor
    Inspiring
    September 10, 2007
    here is the javascript for the head section :

    <SCRIPT LANGUAGE="JavaScript">

    <!-- This script and many more are available free online at -->
    <!-- The JavaScript Source!! http://javascript.internet.com -->

    <!-- Begin
    // Set up the image files to be used.
    var theImages = new Array() // do not change this
    // To add more image files, continue with the
    // pattern below, adding to the array.
    <!---img src="../../../images/logistics/safety/safety_logo_1.gif" usemap="#safety_logo_map" border="0"--->
    theImages[0] = 'safety_logo_1.gif'
    theImages[1] = 'safety_logo_2_test.gif'
    theImages[2] = 'safety_logo_3_test.gif'
    theImages[3] = 'safety_logo_4_test.gif'

    // do not edit anything below this line

    var j = 0
    var p = theImages.length;
    var preBuffer = new Array()
    for (i = 0; i < p; i++){
    preBuffer = new Image()
    preBuffer    .src = theImages
    }
    var whichImage = Math.round(Math.random()*(p-1));
    function showImage(){
    document.write('<img src="'+theImages[whichImage]+'">');
    }

    // End -->
    </script>

    And this is the part in the body, where the image should be displayed :
    <SCRIPT LANGUAGE="JavaScript">

    <!-- This script and many more are available free online at -->
    <!-- The JavaScript Source!! http://javascript.internet.com -->

    <!-- Begin
    showImage();
    // End -->
    </script>
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices