The goal is to hover over a sentence in the left column, and the image pops up in right column. Works in Chrome and other browsers, BUT NOT IN IE versions previous to 11. If I didn't need this right away I'd find a better alternative. Don't know how to troubleshoot this. Many thanks for your thoughts.
Here's the image swap stuff.
<a href="#" onclick="null()"><li onmouseover="MM_swapImage('0','','images/services/1.jpg',1)" onmouseout="MM_swapImgRestore()">Invitation design and management</li></a>
Here's the javascript:
<script type="text/javascript">function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}}function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;}function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x;}function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}}</script>
Well, ok, thanks, but I already did that. I'm not a javascript guru, I have NO idea how to fix the issues it returns. Posting a question here is my last resort. Here's the link to the page. http://66.223.52.136/servicesold.asp
0
An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.
One of a set of tools we're offering as a way of saying thank you for being a part of the community.
Hi,
+1 for leakim971 comment. Your complete HTML source is messed up. jQuery (and browsers) depend on a consistent and valid DOM - otherwise a lot of things can happen.
No additional HTML, HEAD and body tags inside of another body. H3 tag closing was missing, script and CSS links have been moved to the head, onload event moved to jQuery existing document.ready function ...
Please double check and use W3C validator for propper HTML structure.
HTH
Rainer
0
meldraperAuthor Commented:
The first umpteen errors are within the javascript. It works perfectly in Chrome, FF, Opera, and even in IE 11 but not in any other previous versions of IE.
Every now and then I get a stark reminder as to why I ditched DreamWeaver!!
The guys are right - your HTML is all over the place so even if your JS is bang on, it'll probably still not work across all browsers - Chrome and Firefox can often 'guess' what you're trying to do, but IE will throw a proper tantrum if things aren't right.
Having said that - here's a few things to consider - you're including the jQuery library, so this stuff is just so much easier using that. The HTML for your 'menu' is all messed up. The only valid child of a UL is an LI - not an A. Also IDs in an HTML document have to be unique - you've got loads of elements with an ID of colleftp. You should switch those to classes.
Here's an example of how your HTML should look. You'll notice I've included a data attribute to each LI - that's so we know which image we need to use:
<ul class="colleftp"> <li data-image="images/services/1.jpg">Invitation design and management</li> <li data-image="images/services/2.jpg">Guest accommodation planner</li> <li data-image="images/services/3.jpg">Venue research and management</li> <li data-image="images/services/4.jpg">Food and beverage management</li></ul>
Hi,
NO NO NO. It is not an error (only) in Javascript - it is definitely an error in the HTML dom structure! And that there are afterwards errors happening inside Javascript - thats just a consequence of the wrong HTML DOM.
1. You cannot have multiple HTML tags.
2. Opened tags have to be closed (e.g. H3 in the footer area)
3. Closed tags have to be opened (there is one closed P somewhere in the middle)
If you see that it is working in some browser - feel lucky/happy - with the next minor update it can break.
Have a valid HTML DOM structure and it should work in all major browsers.
0
meldraperAuthor Commented:
Thank you. I fixed the html code, followed your suggestions, made the corrections, the mouseover image swap still won't work in previous version of IE. SO I really don't know what to do at this point.
Try implementing my solution - it will work across all browsers and instead of having 20 lines of Javascript junk plus inline onmouseover events, you'll have no inline JS, 4 neat lines of jQuery, valid HTML and nice slick code :)
Surely it's a no brainer!
0
meldraperAuthor Commented:
Thanks, Chris. I will. I inherited this page and @$$umed it worked since it worked in IE 11, it was brought to my attention it did not work in previous version of IE. I'm a programmer, not a designer, but I had to build dynamic data into the page. I will give your solution a try and let you know soon. Thanks again.
0
meldraperAuthor Commented:
question Chris. How do i add that jquery code? Where does it go?
Never assume something will work - particularly if you inherited it. I've inherited plenty of sites from other 'developers' only to discover a nightmare under the bonnet :)
If you get problems with my solution, come back to me, and we'll sort it out. It really is the way to go.
DreamWeaver creates ugly bloated code, particularly the Javascript functions. Bin them and start using jQuery and I promise you - you'll never look back...
YOU are an absolute genius Chris. I am thrilled. Thank you so much for your help. It's working perfectly, all i have to do is fix the fonts and i'm good to go. Many thanks again.
Your styling should be fairly straight forward to fix - the reason you lost it is because you changed from an ID to a Class, so in your CSS instead of this:
#colleftp
you'll need this:
.colleftp
Good luck with it..
0
Question has a verified solution.
Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.
Open in new window