Image link won't show up in IE

**erguebitox** · 05-27-2011, 01:13 AM

Hi everybody!

Im a new HTML & CSS developer and i´m having a problem regarding a script tutorial from this same site (DynamicDrive.com) that shows on how to develop a drop down menu from any link on a web page.

The script belongs to the group "Menus and Navigation" and the sub categorie is "AnyLink DropDown Menu v2.0".

I have properly downloaded and uploaded the 3 external files needed as the directions instructions explain, and deployed both the <HEAD> code as well as the HTML that is to be set where this image link should be. The Drop Down menu works fine and every item shows on all browsers (including IE) at this point!!

Basically, the problem occurs only on IE. When loaded, the horizontal nav bar that contains the image link shows fine, but as soon as the user hovers on the image, it disappears and no longer gets retreived leaving the undesired red "x" within a square. It looks as if the final path of this img was misguided or something like that, because the menu and the nested items work and show perfect on all browsers (included IE).

Other than the code instructions given on the same tutorial script described here at DD, my HTML code where the link image is, goes like this:

Code:

<div id="anylinkmenu"><a href="#" class="menuanchorclass" rel="anylinkmenu4" data-image="../imagenes/srv_servicios_hover.jpg" data-overimage="../imagenes/srv_servicios_hover.jpg"><img src="../imagenes/srv_servicios_hover.jpg" width="77" height="35" border="0" style="border-width:0" /></a></div>

I know this issue might be quite complicated to spot for newly developers like me, but i would really appreciate any help or comment!

Thanx a lot! Regards

**jscheuer1** · 05-27-2011, 04:08 AM

Please post about Dynamic Drive Scripts in the Dynamic Drive Scripts Help section here where I've moved this thread, and:

Warning: Please include a link to the DD script(s) in question in your post. See this post for more information.

Sounds like the page might be in Quirks Mode. If so, try a standards invoking DOCTYPE.

If you need info on DOCTYPES see:

http://www.javascriptkit.com/howto/doctype.shtml

But it could be something else.

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

**erguebitox** · 05-27-2011, 05:35 AM

Hi there Jhon,

Thnx for replying so fast, sorry about posting into the wrong section, didn't know exactly where to post as i just registered myself.

Script: DD AnyLink JS Drop Down Menu v2.2
http://www.dynamicdrive.com/dynamici...pmenuindex.htm

Sorry i've never heard of such Quirks Mode...have no idea what it is, and do u refer to the "DOCTYPE" as in the first line (1) of an HTML document <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ???

I haven`t uploaded the site to the server yet because i`m building it still and i`ve just created a template.dwt so far which i`m currently testing it locally from my PC but live on IE and FF. There is a horizontal menu bar made up by several DIVS that contain pure Rollover images, no text links whatsoever, and only 1 of these image links is the one containing the drop down menu. When testing and loading the page everything works and looks perfect with the dropping of the menu (the containing box, its items, color background) on all browsers except that, when on IE the image link gets hovered, it doesn't gets retreived back and disappears leaving the red "x" within the square and the DIV containing the image link gets empty leaving a blank space where the image comes back every time u refresh the page, but as soon u hover it back once again it disappears.

I thought it could be something with the path of this image and the calling up by the attributes "data-image" and "data-overimage" but i just don't know. The HTML of my page refers to the 4th example, the one with the image as a link:

<div id="anylinkmenu"><a href="#" class="menuanchorclass" rel="anylinkmenu4" data-image="../imagenes/srv_servicios_hover.jpg" data-overimage="../imagenes/srv_servicios_hover.jpg"><img src="../imagenes/srv_servicios_hover.jpg" width="77" height="35" border="0" style="border-width:0" /></a></div>

Is there something else i could do? Should i post the code of the page? The code shows no invalid markups...thats why everything looks fine but...

Thank u very much for your help Jhon

**jscheuer1** · 05-27-2011, 07:09 AM

Well what about the demo page on Dynamic Drive? Works fine here in IE. If it also has the same problem in IE for you, then it's your IE. Speaking of IE, which IE are you using?

BTW, I tested in Quirks Mode and it still works, so that's probably not the issue.

**erguebitox** · 05-27-2011, 05:52 PM

Hello John,

Yes the demo page on Dynamic Drive works fine also here on my IE too! That makes the issue even more misterious to my solving...
My version of IE: IE8-WindowsXP-x86-ESN version: 8.0.6001.18702 I've downloaded it from the very same page of the Microsoft Corp.

I've uploaded the 2 image samples of what u can see on both browsers so it's more clearly explained...

Here's what u can see on Mozilla, the perfect and correct mode: http://www.fpfproductions.com/Mozilla.jpg

An here's on IE the strange disappearing of the image, red X square like missing path: http://www.fpfproductions.com/InternetExplorer.jpg

The strange thing is that at start, whenever loading or refreshing the page the image shows perfectly but once u hover it, only comes back again with F5 or reloading...

Hope I was more clear. Thank you very much John

**jscheuer1** · 05-27-2011, 07:22 PM

Well of course it shows initially and on reload. It's hard coded as the src attribute of the image tag. Something is going wrong when the image is swapped. Some error is occurring. Perhaps the fact that all three images are the same is throwing things off. The data-overimage is supposed to be different.

Or there might be markup above it that contains an unclosed tag that's making the link tag invalid. That would probably be an unclosed a tag for it to have that effect, but it could be almost any invalid markup.

Or IE might be balking at the path. Try the absolute path.

If none of that helps, put a demo of the problem up somewhere on the web and give me a link to it. You may find it works fine on the web. If so, you may have nothing to worry about once the page goes live.

**erguebitox** · 05-30-2011, 04:08 AM

Hello John

Well i've done pretty much everything you instructed on your last post but none of it seems to help..I have tried changing the
data-overimage name path as well as of course the data-image and the img src tag paths so they're not all the same, also tried the absolute full paths to the main
directory where everything else is, taking off the images from the image folder and placing them along with the .html files (same level).

Also searched for any unclosed tags or invalid markups but can't seem to spot any...What i can see is that there's an image path mismatch between
the .dwt template and the only html page i've created so far as the 1st section of the site, based upon this .dwt of course. Don`t know why all of the three paths
involving the process, they all begin the path writting correct on the .dwt file as it should be: "../images/", whereas on the html page
which this .dwt has been applied to, only the data-image and data-over image paths read OK for an html file: "images/" (without the "../"). The
third path, the one belonging to the img src tag keeps reading incorrect path writting directory for a non .dwt file: "../images/" (and should be "images/" at this point)

Although i've tried changing image names and paths directories and re-writting over and over i can't get it right!

I have put the page up on the web to see if that would fix the problems but no way! there is a serious error occurring when the swapping of the image takes place as you mentioned
and i have discovered that not only it doesn't work on IE but also on Mozilla FF too! strange thing that prior to uploading to server and locally testing the page showed no problems within FireFox
and now that it's live on the web it shows a blank empty div space only and no displaying of the DropDown menu at all!
On IE the DropDown menu shows ok... I'm about to go crazy on this!

Here is the link to the site: http://www.fpfproductions.com/Centro...matologia.html

Any help u can provide would really be appreciated!

'll be waiting any comment..

Thanx a lot my friend!

**jscheuer1** · 05-30-2011, 05:46 AM

The image (Centro Dermatologico Vera/imagenes/4hover_only.jpg) is a 404 Not Found. Upload it to the imagenes folder.

The data-overimage is there, but it's path:

Code:

../imagenes/srv_servicios_hover.jpg

is wrong. It should be:

Code:

imagenes/srv_servicios_hover.jpg

Same thing with the data-image path. It should be:

Code:

imagenes/4hover_only.jpg

**erguebitox** · 06-09-2011, 04:29 PM

Hello John

Problem solved! Thank u very much! I've just detached the html from the template and corrected the paths and thats it.

I have another question regarding the clock and date script tutorial. Will open another thread!

Regards.

Thread: Image link won't show up in IE

Thread Tools

Search Thread

Image link won't show up in IE

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions