Results 1 to 6 of 6

Thread: modifying a <div> tag with JavaScript

  1. #1
    Junior Member
    Join Date
    Aug 2004
    Posts
    25

    Unhappy modifying a <div> tag with JavaScript

    I have created a division within a HTML file, using the &lt;div&gt; tag, with the id mnu. I want the HTML code within this division to change when the mouse cursor is placed over the division. Therefore I have added the onmouseover event listener to the division, which calls a JavaScript function called shwMnu when this event is detected. The code that I have used for the function is shown below:

    function shwMnu()
    {
    var mnu="&lt;table&gt;&lt;tr&gt;&lt;td&gt;&lt;img src='webPageFiles/btn2.gif'&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;";
    mnu.innerHTML=mnu;
    }

    The problem is that when the HTML code is changed, instead of the image that I want to appear (i.e. webPageFiles/btn2.gif) I get the box with the red x in it, therefore it would appear that my browser cannot locate the image. I have found that if I place the HTML file in the same directory as the image, so that I can remove the 'webPageFiles\' folder path from the image src attribute then the web-page works as I would like.

    You should also note that the JavaScript file is located in the same directory as the image, i.e. one level below the HTML file. Although I don't think this makes any difference.

    THANX in advance,

    TTAYO

  2. #2
    In And Above Man Black Cluster's Avatar
    Join Date
    Feb 2005
    Posts
    912
    make it img src='http://www.webPageFiles/btn2.gif or what ever the full address is, sometimes such things mess the whole work up.
    \"The only truly secure system is one that is powered off, cast in a block of concrete and sealed in a lead-lined room with armed guards - and even then I have my doubts\".....Spaf
    Everytime I learn a new thing, I discover how ignorant I am.- ... Black Cluster

  3. #3
    Junior Member
    Join Date
    Aug 2004
    Posts
    25
    Thanx for your reply Black Cluster, but I have already tried using the full file path instead of the relative file path and that also didn't work.

    L8R,

    TTAYO

  4. #4
    first point why are you using tables for none tabular data? grrrr!

    anyways properly consturcted img tag looks like so...

    Code:
    &lt;img src="./webPageFiles/btn2.gif" alt="Text about the Image" /&gt;
    as the img tag has no end tag you need to close it, and for full standards compliance make sure you always use your alt tags! But please remember alt tags are suppoused to be an alternative to the image (ie when it wont load). If you want to add in a tooltip use the title attribute.

    If that img tag doesn't work please reply with...

    your dir layout as like so,
    root/page.html
    root/webPageFiles/image.gif

    so can be sure have gotten the location of each file in relation to each other and the document root correct

    as well as the location which the browser is looking for the image (rightclick on the red X and choose properties - what is the URL the browser is reporting?)

    ta

    v_Ln

  5. #5
    Junior Member
    Join Date
    Aug 2004
    Posts
    25
    thanx for that valhallen, it worked out great.

    although in solving that problem I have found another, I have been editing the html that is contained within a &lt;div&gt; tag, with the use of JavaScript. Which works fine until I try to include an anchor hyperlink with the JavaScript, then the browser recognises the hyperlink, but the link will not forward the browser to the desired location. When one clicks on the link the browser remains on the current page.

    So I have no idea what is causing the problem, because if their was a problem with the desination then I would expect the browser to give me a 'page cannot be displayed' error.

    Thanx in advance,

    TTAYO

  6. #6
    you could always include the location within your javascript function the link is calling

    Code:
    window.location="http://www.page-to-show.com/";

Posting Permissions

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