473,326 Members | 2,134 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

Hover Images Work in FF & NN, but not IE

RMWChaos
137 100+
I have four pieces of code to automatically build my navigation buttons and choose which page to load: 1) a hover script, which swaps the images onmouseover and onmouseout, 2) a DOM loader, which automatically creates and removes DOM elements, 3) a nav script, which builds the nav buttons depending on the page being viewed, and 4) a page loader script that clears out the content area and inserts the newly selected content.

What should happen is this: NAVInit selects the images to use depending on the page being viewed, and submits them to the DOMLoader to remove the old elements and create the new elements. Part of the DOM creation process includes the attributes 'onmouseover=' and 'onmouseout=', which intiate the HOVERLoader script to swap out images, and an 'onclick=' attribute, which calls the PAGELoader script to load the new content and reset the nav buttons.

This all works in FF2.2.08 and NN9, but the onmouseover, onmouseout, and onclick do not work in IE7 (dang Microsoft again!). IE7 does not give any errors, however.

The strange thing is, I know that these three attributes all work in IE7 when the DOM Elements are created manually. So, what is going on here? The only thing that I can think of is in the way I create my strings. You'll see in the mouseOver and mouseOut vars I use in the NAVLoader script.

Not sure how much of the code you want to see, but I will try to include only the relevant parts. Because there is so much code here, I will add them in separate replies to this post.

Thanks in advance for your feedback.
Nov 10 '07 #1
13 1948
RMWChaos
137 100+
HOVERLoader script:

Expand|Select|Wrap|Line Numbers
  1. function mouseHover(imagePath, imageId)
  2.  
  3.     {
  4.  
  5.     var image = document.getElementById(imageId);
  6.  
  7.     image.src = imagePath;
  8.  
  9.     };
  10.  
Simple enough.
Nov 10 '07 #2
RMWChaos
137 100+
DOMLoader script:

Expand|Select|Wrap|Line Numbers
  1. function removeDOM(id) // Remove DOM Elements Function //
  2.  
  3.     {
  4.  
  5.     var idExist = document.getElementById(id);
  6.  
  7.     if (idExist) // Delete child node. //
  8.  
  9.         {
  10.  
  11.         idExist.parentNode.removeChild(idExist);
  12.  
  13.         }
  14.  
  15.     else // Node does not exist, exit //
  16.  
  17.         {
  18.  
  19.         return;
  20.  
  21.         };
  22.  
  23.     };
  24.  
  25. function removeAllChildNodes(node) // Remove All Child Nodes from a Parent Node //
  26.  
  27.     {
  28.  
  29.     var parentExist = document.getElementById(node);
  30.  
  31.     if (parentExist && parentExist.hasChildNodes())
  32.  
  33.         {
  34.  
  35.         while (parentExist.childNodes.length > 0) // Remove the Child Nodes while the Parent Node has Them //
  36.  
  37.             {
  38.  
  39.             parentExist.removeChild(parentExist.firstChild);
  40.  
  41.             };
  42.  
  43.         }
  44.  
  45.     else // Parent does not exist or does not have child nodes //
  46.  
  47.         {
  48.  
  49.         return;
  50.  
  51.         };
  52.  
  53.     };
  54.  
  55. function createDOM(attrib) // Create DOM Elements Function //
  56.  
  57.     {
  58.  
  59.     var defaultAttribs = 
  60.  
  61.         {
  62.  
  63.         'dom'        :    'div',
  64.  
  65.         'parent'    :    'body'
  66.  
  67.         };
  68.  
  69.     for (var index in defaultAttribs) // Assign listed default attribs to 'undefined' attribs //
  70.  
  71.         {
  72.  
  73.         if(typeof attrib[index] == 'undefined')
  74.  
  75.             {
  76.  
  77.             attrib[index] = defaultAttribs[index];
  78.  
  79.             };
  80.  
  81.         };
  82.  
  83.     var idExist = document.getElementById(attrib.id);
  84.  
  85.     var createElement = document.createElement(attrib.dom);
  86.  
  87.     var parentExist = document.getElementById(attrib.parent);
  88.  
  89.     if (typeof attrib.id == 'undefined') // If 'id' is 'undefined', alert user and exit //
  90.  
  91.         {
  92.  
  93.         alert("There is no 'id' to create the node.");
  94.  
  95.         return;
  96.  
  97.         };
  98.  
  99.     if (attrib.dom == 'text') // Change createElement to createTextNode & assign parentExist to 'attrib.id' //
  100.  
  101.         {
  102.  
  103.         createElement = document.createTextNode(attrib.text);
  104.  
  105.         parentExist = document.getElementById(attrib.id);
  106.  
  107.         }
  108.  
  109.     else if (attrib.dom == 'script') // Assign parentExist to <head> //
  110.  
  111.         {
  112.  
  113.         parentExist = document.getElementsByTagName('HEAD')[0];
  114.  
  115.         };
  116.  
  117.     if (attrib.parent == 'body') // Assign parentExist to <body> //
  118.  
  119.         {
  120.  
  121.         if (document.getElementsByTagName) // W3C HTML DOM Level 1+ Standard (preferred method) //
  122.  
  123.             {
  124.  
  125.             parentExist = document.getElementsByTagName('BODY')[0];
  126.  
  127.             }
  128.  
  129.         else if (document.body) // Microsoft Implementation Shortcut //
  130.  
  131.             {
  132.  
  133.             parentExist = document.body;
  134.  
  135.             }
  136.  
  137.         else if (document.layers) // Netscape Navigator 4+ //
  138.  
  139.             {
  140.  
  141.             parentExist = document.tags['BODY'];
  142.  
  143.             }
  144.  
  145.         else // Alert user //
  146.  
  147.             {
  148.  
  149.             alert("Browser does not support known means to access <body>.");
  150.  
  151.             };
  152.  
  153.         }
  154.  
  155.     else if (!parentExist) // Create missing parent or target node first //
  156.  
  157.         {
  158.  
  159.         var body = document.getElementsByTagName('BODY')[0];
  160.  
  161.         var createParent = document.createElement('div');
  162.  
  163.         createParent.id = attrib.parent;
  164.  
  165.         body.appendChild(createParent);
  166.  
  167.         if (attrib.dom != 'text')
  168.  
  169.             {
  170.  
  171.             parentExist = document.getElementById(attrib.parent);
  172.  
  173.             };
  174.  
  175.         };
  176.  
  177.     if (parentExist) // Set attribs and create element //
  178.  
  179.         {
  180.  
  181.         if (attrib.dom != 'text')
  182.  
  183.             {
  184.  
  185.             createElement = document.createElement(attrib.dom);
  186.  
  187.             for (index in attrib)
  188.  
  189.                 {
  190.  
  191.                 createElement.setAttribute(index, attrib[index]);
  192.  
  193.                 };
  194.  
  195.             };
  196.  
  197.         parentExist.appendChild(createElement);
  198.  
  199.         };
  200.  
  201.     };
  202.  
Longer, but not really all that complex. Just a whole lot of 'if' and 'if...else' statements to cover as many possibilities as possible.
Nov 10 '07 #3
RMWChaos
137 100+
NAVLoader script:

Expand|Select|Wrap|Line Numbers
  1. var page = new Array("home", "guides", "specs", "links", "join", "news", "forum", "kills", "corp", "members");
  2.  
  3. var pageSelected = "home";
  4.  
  5. function navInit()
  6.  
  7.     {
  8.  
  9.     for (var x in page)
  10.  
  11.         {
  12.  
  13.         var imageId = "divnav" + page[x];
  14.  
  15.         var divNavExist = document.getElementById(imageId);
  16.  
  17.         if (divNavExist)
  18.  
  19.             {
  20.  
  21.             removeDOM(imageId);
  22.  
  23.             };
  24.  
  25.         if (pageSelected == page[x])
  26.  
  27.             {
  28.  
  29.             var pathSelected = "../images/selected" + page[x] + ".jpg"; 
  30.  
  31.             var alreadyHere = 'NavCon indicates that you are already here.';
  32.  
  33.             createDOM({
  34.  
  35.                 'dom'        :    'img',
  36.  
  37.                 'id'        :    imageId,
  38.  
  39.                 'alt'        :    alreadyHere,
  40.  
  41.                 'title'        :    alreadyHere,
  42.  
  43.                 'src'        :    pathSelected,
  44.  
  45.                 'onclick'    :    'alert("Is your NavCon malfunctioning? You are already here!")'
  46.  
  47.                 });
  48.  
  49.             }
  50.  
  51.         else if (pageSelected != page[x])
  52.  
  53.             {
  54.  
  55.             var altName = "Jump to " + page[x] + " sector";
  56.  
  57.             var pathHover = "../images/hover" + page[x] + ".jpg";
  58.  
  59.             var pathDefault = "../images/default" + page[x] + ".jpg";
  60.  
  61.             var mouseOver = "mouseHover('" + pathHover + "', '" + imageId + "')";
  62.  
  63.             var mouseOut = "mouseHover('" + pathDefault + "', '" + imageId + "')";
  64.  
  65.             var loadPage = "pageLoader(" + x + ")";
  66.  
  67.             createDOM({
  68.  
  69.                 'dom'        :    'img',
  70.  
  71.                 'id'        :    imageId,
  72.  
  73.                 'alt'        :    altName.capitalize(),
  74.  
  75.                 'title'        :    altName.capitalize(),
  76.  
  77.                 'src'        :    pathDefault,
  78.  
  79.                 'onmouseover'    :    mouseOver,
  80.  
  81.                 'onmouseout'    :    mouseOut,
  82.  
  83.                 'onclick'    :    loadPage
  84.  
  85.                 });
  86.  
  87.             };
  88.  
  89.         };
  90.  
  91.     };
  92.  
  93.  
A little more complex, but not too bad.
Nov 10 '07 #4
RMWChaos
137 100+
PAGELoader script:

Expand|Select|Wrap|Line Numbers
  1. function pageLoader(pageNum) // Initiate Page Selection
  2.  
  3.     {
  4.  
  5.     pageSelected = page[pageNum]; // Set var to the new page
  6.  
  7.     navInit(); // reset nav buttons using new pageSelected var
  8.  
  9.     removeAllChildNodes('content'); // clear the content area
  10.  
  11.     switch(pageNum) // load the new content
  12.  
  13.          {
  14.  
  15.          // several different cases depending on the nav button selected
  16.  
  17.          };
  18.  
  19.  
I shortened this one by not including all the switch cases.
Nov 10 '07 #5
Dasty
101 Expert 100+
Quite a pain to read the whole stuff. But your problem is in how you assign event handlers to new created objects. No, IE has no problem with events on new created objects. After I digged your code i found that you basically are doing it like this:

[PHP]newElement.setAttribute('onclick','what to do in string format');
[/PHP]
You can not assign strings as event handler. I was even surprised that FF accepted it (and evalued it by default). The problem is, that you can assign just functions (refs). So to fast fix, you can do this:

[PHP]//instead:
newElement.setAttribute('onclick','what to do in string format');
//do this:
newElement.setAttribute('onclick',new Function('what to do in string format'));[/PHP]

(it will create anonymous function for each object)
Nov 11 '07 #6
RMWChaos
137 100+
Dasty,

Thank you very much for your time reviewing my code--I know it couldn't have been easy--and for your suggested fix. All my code is modular so that I don't have repeat multiple lines in each script. For instance, several different scripts use the DOMLoader and HOVERLoader scripts to generate content.

I thought the problem might be with my mouseOver, mouseOut, and pageLoader vars, just couldn't figure out what it was. I was under the impression that the string would be converted before DOMLoader added it as an attribute; guess not.

You are basically saying I should do this:

Expand|Select|Wrap|Line Numbers
  1. //instead of this
  2. onmouseover  :  mouseOver,
  3.  
  4. //do this
  5. onmouseover : new Function(mouseOver),
  6.  
That is a quick fix. Let me give it a try and I will report back the results.
Nov 11 '07 #7
RMWChaos
137 100+
Dasty,

That worked great in IE, but now FF and NN don't work. I did the fix two ways:

Expand|Select|Wrap|Line Numbers
  1. //first like this
  2. var mouseOver = new Function ("mouseHover('" + pathHover + "', '" + imageId + "')");
  3. onmousover   :   mouseOver
  4.  
  5. //then like this
  6. var mouseOver = "mouseHover('" + pathHover + "', '" + imageId + "')";
  7. onmousover   :   new Function (mouseOver)
  8.  
I suppose that I could include a browser check to see if it is IE, then include "new Function" in the mouseOver, mouseOut, and loadPage vars. That just seems a bit clunky to me. Perhaps there is another way.
Nov 12 '07 #8
RMWChaos
137 100+
Well, this is the code I ended up going with for now:

Expand|Select|Wrap|Line Numbers
  1. // This works only for MSIE
  2. if (navigator.appName == "Microsoft Internet Explorer")
  3.     {
  4.     var mouseOver = new Function("mouseHover('" + pathHover + "', '" + imageId + "')");
  5.     var mouseOut = new Function("mouseHover('" + pathDefault + "', '" + imageId + "')");
  6.     var loadPage = new Function("pageLoader(" + x + ")");
  7.     }
  8. // This works for Mozilla, FF, NN9, etc.
  9. else
  10.     }
  11.     var mouseOver = "mouseHover('" + pathHover + "', '" + imageId + "')";
  12.     var mouseOut = "mouseHover('" + pathDefault + "', '" + imageId + "')";
  13.     var loadPage = "pageLoader(" + x + ")";
  14.     };
  15.  
It works, but I would really like to know why one set of variables does not work for all browsers.

Perhaps the problem I should be working on instead is a better way to create my onmouseover, onmouseout, and onclick attributes.

I'm going for modularity and eliminating redundancy; so having to rewrite these vars twice really annoys me. :-|
Nov 12 '07 #9
Dasty
101 Expert 100+
Well, this is the code I ended up going with for now:

Expand|Select|Wrap|Line Numbers
  1. // This works only for MSIE
  2. if (navigator.appName == "Microsoft Internet Explorer")
  3.     {
  4.     var mouseOver = new Function("mouseHover('" + pathHover + "', '" + imageId + "')");
  5.     var mouseOut = new Function("mouseHover('" + pathDefault + "', '" + imageId + "')");
  6.     var loadPage = new Function("pageLoader(" + x + ")");
  7.     }
  8. // This works for Mozilla, FF, NN9, etc.
  9. else
  10.     }
  11.     var mouseOver = "mouseHover('" + pathHover + "', '" + imageId + "')";
  12.     var mouseOut = "mouseHover('" + pathDefault + "', '" + imageId + "')";
  13.     var loadPage = "pageLoader(" + x + ")";
  14.     };
  15.  
It works, but I would really like to know why one set of variables does not work for all browsers.

Perhaps the problem I should be working on instead is a better way to create my onmouseover, onmouseout, and onclick attributes.

I'm going for modularity and eliminating redundancy; so having to rewrite these vars twice really annoys me. :-|
No way. Do yourself a favor and forget that something like navigator.appName even exists. Nobody forces browser to identify itself right. Especially minor browsers are happy to identify themselves as one of the major browsers. So parsing appName is not the way - never. (google javascript browser identification and you'll find some more useful pseudo - solutions)

But back to your problem:

To be honest I am quite surprised of setAttribute behavior. I always thought that:

object[parameter_name] = value

is equivalent with:

object.setAttribute(parameter_name, value);

but obviously it is not. But I know, that obj.onclick = value; is working fine in all browsers. So try this (can not test it so check for typos):
[PHP]
for (index in attrib)
{
createElement.setAttribute(index, attrib[index]);
};
[/PHP]

change to:
[PHP]
for (index in attrib)
{
createElement[index] = attrib[index];
};
[/PHP]

It should work with events. (And ofc, use that new Function() for event handlers) Please run some tests and let us know.
Nov 12 '07 #10
gits
5,390 Expert Mod 4TB
I always thought that:

Expand|Select|Wrap|Line Numbers
  1. object[parameter_name] = value;
  2.  
is equivalent with:

Expand|Select|Wrap|Line Numbers
  1. object.setAttribute(parameter_name, value);
but obviously it is not. But I know, that obj.onclick = value; is working fine in all browsers.
in some cases that seems to be equivalent ... but simply try it with the 'readonly' or 'disabled' attributes. there is a difference between setting an objects javascript-property (your first code) and setting an attribute of the dom-node (the second variation) ... in case you set the attribute 'readonly' with setAttribute(); you HAVE to remove it to make the node to accept input again ... we have to use removeAttribute() for that. we cannot set the attribute to false with set attribute here. but you may set the property node.readonly = false; BUT: with that we are mixing up the two ways ... and it is good practice to use ONE way to avoid confusion especially in case you have to debug your code later on :)

kind regards
Nov 12 '07 #11
Dasty
101 Expert 100+
in some cases that seems to be equivalent ... but simply try it with the 'readonly' or 'disabled' attributes. there is a difference between setting an objects javascript-property (your first code) and setting an attribute of the dom-node (the second variation) ... in case you set the attribute 'readonly' with setAttribute(); you HAVE to remove it to make the node to accept input again ... we have to use removeAttribute() for that. we cannot set the attribute to false with set attribute here. but you may set the property node.readonly = false; BUT: with that we are mixing up the two ways ... and it is good practice to use ONE way to avoid confusion especially in case you have to debug your code later on :)

kind regards
Good to know, did not know that (thank you). Makes sense now (i just thought that removeAttribute would be the same as "delete obj.property" ... but you can not delete obj.readOnly for example as you said). But while he can not use setAttribute for assigning event handlers and he can not assign all properties by just simple JS property assignment, then he has to divide events and attributes and work with them in different ways.
Nov 12 '07 #12
RMWChaos
137 100+
[quote=Dasty]change to:
[PHP]
for (index in attrib)
{
createElement[index] = attrib[index];
};
[/PHP]

Aha! You just solved a problem I was having that forced me to use the first method. I couldn't figure out how to set the index attribute because I had forgotten that .index is equiv to [index], and .index would not work. Now I can change that code and get around that problem.

I'll try it out and get back to you.
Nov 12 '07 #13
RMWChaos
137 100+
Alright, that worked in all browsers! Setting the dom-node attribute is exactly what I wanted to do in the first place (ergo "DOMLoader") ;-)).

Thank you for your help!
Nov 12 '07 #14

Sign in to post your reply or Sign up for a free account.

Similar topics

6
by: Nikolaos Giannopoulos | last post by:
If I have simplified html (I have removed height, weight, alt, etc... attributes to simplify the example) such as: <div id="header"> <a href="blah.html"><img src="img/blah.jpg"></a> </div> ...
2
by: Pamel | last post by:
I currently have a page that has 6 images in a row. Using javascript, when the mouse goes over one of the images, a word is placed below the images. Each image has a different word. I am trying...
12
by: Sander Tekelenburg | last post by:
Trying to make some images disappear on hover (works), and others appear on hover (works not). In tested browsers, this gives the expected result: IMG.disappear {visibility: visible}...
6
by: Michael Rozdoba | last post by:
I've had some trouble getting IE to behave in respect of applying absolute positioning to a span on an a:hover. I can get it to work, but I don't understand why certain code causes it to fail to...
8
by: JLahm | last post by:
I have defined a class for my images called .image that specifies the default border color, width and style. I'd like to be able to have the pseudo elements link, visited and active have one color...
2
by: andrewtayloruk | last post by:
Hi, i'm pretty new to CSS and html so please go easy on me. I'm trying to make a menu, the idea is that when you hover over the images in the menu they glow. To do this i have set up the...
3
by: noize | last post by:
I have found other bugs related to using hover is CSS with IE, but I cannot find a fix for my issue. I have checked it in both IE 6 & 7 with the same results. I have built a drop-down menu using...
1
by: darkzone | last post by:
Hi I saw this layout and wanted to try some thing similar, but I am unable to change the position of the vertical menu with out changing the position of the hole document and I don't really have a...
4
by: Sigilaea | last post by:
My previous post got squashed because m post is too long. Sorry for that: I have an AJAX page with a CSS menu at the top. My problem is the hover functionality stops working after someone clicks...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.