Results 1 to 4 of 4

Thread: Call variable content via image maps and OnMouseOver

  1. #1
    Join Date
    Jun 2010

    Call variable content via image maps and OnMouseOver

    I'm developing a multi-layered diagram as a web-page. The layers show versions of a network as it grows, with various components. I have created an image map on each layer. At the side, there is a panel where I want to display info about each component as I mouse over each element.
    As a test, I used getElementbyID and inner.Html with a Javascript called writeText to display text in the side panel. However, as there are 6 layers and 20 - 30 images on each layer, I don't want to embed the text in each image map as it will make updating content a hassle and long home page.
    My idea is to use the ID of each image map as a variable and call the associated content from a separate page (XML maybe?) by naming the content section the same as the ID of the image map. I need to write some script that would work something like:

    onMouseOver="writeText(call content with name="imagemapID")

    If anyone understands all that, can you suggest a way to call content with variables?

  2. #2
    Join Date
    Mar 2010
    one way to do it is to put all your text for the various regions of your image map into an associative array and then assign the href in each image region to run a javascript funtion to do something with the text.

    PHP Code:
    var textA = new Array();
    textA['region_1'] = "text region 1";
    textA['region_2'] = "text region 2";
    textA['region_3'] = "text region 3";
    //then in your image map have something like
    //for each region in your images
    //and somewhere else in your js
    function showText(region) {

  3. #3
    Join Date
    Jun 2010
    Thanks for that Tirna.
    However, as I'd like to have all the content in a separate document, can I use anchors in that doc instead of an array, and then maybe substitute the URL for the 'region1' string? If so, how would I mod the Showtext javascript?

  4. #4
    Join Date
    Mar 2010
    yes I suppose you could if assuming the 'information panel' is say an <iframe>. You could then have another separate information web page with anchors for each region and store the urls to each anchor in the array. showText(region) would then change the src in the <iframe> for each region clicked on your image map.

    Or you could just store the information array textA[] in a separate javascript file.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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