Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.
onmouseover swapimage not working in IE
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(
Here's the javascript:
Here's the image swap stuff.
<a href="#" onclick="null()"><li onmouseover="MM_swapImage(
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>
Who is Participating?
validate your page here : http://validator.w3.org/
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
the error is not javascript errors but HTML errors
For example we can see an HTML tag inside an HTML document, this is not Javascript.
Javascript need valid content to play.
For example we can see an HTML tag inside an HTML document, this is not Javascript.
Javascript need valid content to play.
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.
Your HTML should more look like this:
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
+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.
Your HTML should more look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Events By Reese</title>
<link href="ebr13.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="linotypeUnivers_Compressed/linotypeUnivers_Compressed.css">
<link rel="stylesheet"href="/slider/layerslider/css/layerslider.css"type="text/css">
<!--[if lt IE 9]>
<script src="/slider/assets/js/html5.js"></script>
<![endif]-->
<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>
<script src="/slider/layerslider/jQuery/jquery.js"type="text/javascript"></script>
<script src="/slider/layerslider/jQuery/jquery-easing-1.3.js"type="text/javascript"></script>
<script src="/slider/layerslider/jQuery/jquery-transit-modified.js"type="text/javascript"></script>
<script src="/slider/layerslider/js/layerslider.transitions.js"type="text/javascript"></script>
<script src="/slider/layerslider/js/layerslider.kreaturamedia.jquery.js"type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#layerslider').layerSlider({
skinsPath : '/slider/layerslider/skins/',
skin : 'minimal',
thumbnailNavigation : 'hover',
hoverPrevNext : false,
autoPlayVideos : false
});
MM_preloadImages('images/services/1.jpg');
});
</script>
</head>
<body>
<div id="headerWrap">
<div id="headerNavLeft">
<a href="index.asp">Home</a>
<a href="services.asp" class="current">Services</a>
<a href="gallery.asp">Photos</a>
<a href="about.asp">Team</a>
<a href="press.asp">Press</a>
</div><!-- headerNavLeft -->
<div id="headerLogo">
<a href="index.asp"><img src="images/logoHeader.png" border="0" /></a>
</div><!-- headerLogo -->
<div id="headerNavRight">
<a href="siscompanies.html">Sister Companies</a>
<a href="tv.html">TV Show</a>
<a href="http://ebrgroup.wordpress.com/" target="_blank">Blog</a>
<a href="contact.asp">Contact</a>
</div><!-- headerNavRight -->
<div style="clear: both;"></div>
</div><!-- headerWrap -->
<div id="headerBKG"></div><!-- headerBKG -->
<div id="picMain">
<style type="text/css"media="screen">
.ls-layer,
.ls-layer * {
font-family: Arial, Serif;
white-space: nowrap;
font-weight: normal;
text-shadow: none;
}
.br5 {
border-radius: 5px;
}
.c {
text-align: center;
}
.sl1, .sl2 {
font-size: 50px;
line-height: 100px;
height: 100px;
}
.sl1 {
color: #eee;
background: black;
background: rgba(0,0,0,.75);
}
.sl2 {
color: #444;
background: white;
}
.red,
.black,
.white {
line-height: 70px;
font-size: 40px;
}
.red {
color: white;
background: #cf431d;
}
.black {
background: black;
background: rgba(0,0,0,.75);
color: white;
}
.white {
color: #444;
background: white;
}
.plus1,
.plus2,
.plus3,
.plus4,
.br100 {
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
}
.plus1,
.plus2,
.plus3,
.plus4 {
text-align: center;
width: 50px;
height: 50px;
font-size: 50px;
line-height: 50px;
}
.plus1 {
color: #eee;
background: #2e69ad;
}
.plus2 {
color: #224177;
background: #eee;
}
.plus3 {
color: #3b173d;
background: #eee;
}
.plus4 {
color: white;
background: #85c201;
}
.text1,
.text2,
.text3,
.text4,
.text5,
.text6,
.text7 {
font-size: 30px;
}
.text1 {
color: #f0f6fd;
}
.text2 {
padding: 10px 25px 10px 25px;
color: #f0f6fd;
background: #2e69ad;
}
.text3 {
padding: 10px 25px 10px 25px;
color: #2e69ad;
background: #f0f6fd;
}
.text4 {
text-shadow: 0px 0px 20px #224177;
color: #eee;
}
.text5 {
padding: 10px 25px;
color: #224177;
background: #eee;
}
.text6 {
color: #eee;
}
.text7 {
color: #85c201;
}
.text-a {
font-weight: bold;
padding: 15px 30px 15px 30px;
font-size: 80px;
color: #f4f8fc;
}
.text-b {
box-shadow: -2px -2px 15px -3px black;
border-radius: 0px;
padding: 5px 60px;
font-size: 60px;
color: #d85127;
background: white;
}
.text-c {
box-shadow: -2px -2px 15px -3px black;
border-radius: 0px;
padding: 10px 40px;
font-size: 50px;
color: white;
background: #d85127;
}
.text-d {
box-shadow: -3px -3px 20px -3px black;
border-radius: 0px;
padding: 10px 60px;
font-size: 50px;
color: #d85127;
background: white;
}
.text-e {
padding: 4px 15px 7px 15px;
font-size: 24px;
color: #444f70;
background: #ffffff;
}
.text-f {
font-size: 60px;
color: #ff7700;
}
</style>
<div id="layerslider-container" align="center">
<!--LayerSlider begin-->
<div id="layerslider"style="width: 1000px; height: 600px; margin: 0 auto;" align="center">
<!--LayerSlider layer-->
<div class="ls-layer"style="slidedelay: 5000; transition2d: 83, 85, 14; ">
<!--LayerSlider background-->
<img src="/slider/gallery/bgServices1.jpg" class="ls-bg" alt="Slide background">
<!--LayerSlider sublayers-->
<img src="/slider/gallery/bgServices2.png" class="ls-s-1" alt="layer1-sublayer1" style="left: 20px; top: 18px; slidedirection:bottom; durationin:2000; easingin : easeOutQuart; delayin : 0;">
<img src="/slider/gallery/bgServices3.png" class="ls-s-1" alt="layer1-sublayer2" style="left: 25px; top: 5px;slidedirection : top; durationin : 2000; easingin : easeOutQuart; delayin : 0;">
</div>
</div>
</div>
<!--LayerSlider end-->
</div><!-- picMain -->
<br>
<br>
<div id="contentWrap">
<div id="contentMain">
<p style="margin-bottom: 50px; margin-top: 0px; border-bottom: 1px dashed #666; padding-bottom: 20px; text-align: left;">Our full-service teams are able to manage the entire planning and production process – from booking the band to sending you down the aisle!
When you book your event with us, you are placed in the hands of a masterful team of professionals, each dedicated to distinct aspects of the event process, who are by your side every step of the way. Each team consists of a Lead Producer, an Assistant Producer, and a Creative Producer – all with specialized tasks and talents, all working together in unison.
Our teams work diligently, creatively, and collectively so you can leave the details to us and enjoy every minute of your special day.
<br>
<br>
</p>
</div><!-- contentMain -->
<div id="bottom">
<div id="colleft">
<p style="font-size:28px;" id="colleftp">OUR SERVICES INCLUDE, BUT ARE NOT LIMITED TO:</p>
<p style="font-size:21px;" id="colleftp">Full-Planning Services</p>
<ul id="colleftp">
<a href="#" onclick="null()"><li onmouseover="MM_swapImage('0','','images/services/1.jpg',1)" onmouseout="MM_swapImgRestore()">Invitation design and management</li></a>
<a href="#" onclick="null()"><li onmouseover="MM_swapImage('0','','images/services/2.jpg',1)" onmouseout="MM_swapImgRestore()">Guest accommodation planner</li></a>
<a href="#" onclick="null()"><li onmouseover="MM_swapImage('0','','images/services/3.jpg',1)" onmouseout="MM_swapImgRestore()">Venue research and management</li></a>
<a href="#" onclick="null()"><li onmouseover="MM_swapImage('0','','images/services/4.jpg',1)" onmouseout="MM_swapImgRestore()">Food and beverage management</li></a>
</ul>
<p style="font-size:21px;" id="colleftp">Entertainment Management</p>
<ul id="colleftp">
<a href="#" onclick="null()"><li onmouseover="MM_swapImage('0','','images/services/5.jpg',1)" onmouseout="MM_swapImgRestore()">Management of all vendors hired by the client</li></a>
<a href="#" onclick="null()"><li onmouseover="MM_swapImage('0','','images/services/6.jpg',1)" onmouseout="MM_swapImgRestore()">Full orchestration of event from start to finish</li></a>
</ul>
<p style="font-size:21px;" id="colleftp">Design and Décor Services</p>
<ul id="colleftp">
<a href="#" onclick="null()"><li onmouseover="MM_swapImage('0','','images/services/7.jpg',1)" onmouseout="MM_swapImgRestore()">Overall event design and management</li></a>
<a href="#" onclick="null()"><li onmouseover="MM_swapImage('0','','images/services/8.jpg',1)" onmouseout="MM_swapImgRestore()">Floral design and production</li></a>
<a href="#" onclick="null()"><li onmouseover="MM_swapImage('0','','images/services/9.jpg',1)" onmouseout="MM_swapImgRestore()">Management of rentals</li></a>
<a href="#" onclick="null()"><li onmouseover="MM_swapImage('0','','images/services/10.jpg',1)" onmouseout="MM_swapImgRestore()">Lighting design and production</li></a>
<a href="#" onclick="null()"><li onmouseover="MM_swapImage('0','','images/services/11.jpg',1)" onmouseout="MM_swapImgRestore()">Space planning and rendering</li></a>
</ul>
</div>
<div id="colright">
<img src="images/services/0.jpg" id="0">
</div>
</div>
<div style="clear: both; height: 40px;"></div>
<div id="catMain" style="padding-bottom: 40px;">
<div id="catBox">
<a href="planningHome.asp"><img src="images/imgBoxPlan.jpg" border="0" style="margin-top: 3px;" /></a>
</div><!-- catBot -->
<div id="catBox">
<a href="floralHome.asp"><img src="images/imgBoxFloral.jpg" border="0" style="margin-top: 3px;" /></a>
</div><!-- catBot -->
<div id="catBox">
<a href="linenHome.asp"><img src="images/imgBoxLinen.jpg" border="0" style="margin-top: 3px;" /></a>
</div><!-- catBot -->
<div id="catBox" style="margin-right: 0px;">
<a href="lightingHome.asp"><img src="images/imgBoxLight.jpg" border="0" style="margin-top: 3px;" /></a>
</div><!-- catBot -->
</div><!-- catmain -->
</div><!-- contentWrap -->
<div id="footerBKG"></div><!-- footerBKG -->
<div id="footerWrap">
<div id="footer">
<div id="footerLeft">
<a href="index.asp"><img src="images/logoFooter.png" border="0" /></a>
</div><!-- footerLeft -->
<div id="footerRight">
<a href="index.asp">Home</a>
<a href="services.asp">Services</a>
<a href="gallery.asp">Photos</a>
<a href="about.asp">Team</a>
<a href="press.asp">Press</a>
<a href="siscompanies.html">Sister Companies</a>
<a href="tv.html">TV Show</a>
<a href="http://ebrgroup.wordpress.com/" target="blank">Blog</a>
<a href="contact.asp">Contact</a>
<a href="https://www.facebook.com/pages/Events-by-Reese/162677523759035" target="_blank"><img src="images/iconfacebook.png" width="35" style="vertical-align:bottom; border: none; margin: 0;"></a>
<a href="http://ebrgroup.wordpress.com/" target="_blank"><img src="images/iconblog.png" width="35" style="vertical-align:bottom; border: none; margin: 0;"></a>
<p>
(210) 340-4088 402 West Rhapsody, San Antonio, Texas 78216 <a href="https://maps.google.com/maps?q=events+by+reese&hl=en&oe=utf-8&client=firefox-a&hq=events+by+reese&hnear=San+Antonio,+Texas&t=m&cid=13306160548728164821&z=11&iwloc=A" target="_blank" style="font-size: 30px; font-family: LinotypeUnivers-410Cm;">map</a> <a href="mailto:info@eventsbyreese.com" style="font-size: 30px; font-family: LinotypeUnivers-410Cm;">email us</a>
</p>
<h3 style="color: #fff; letter-spacing: .2ex; margin-top: -18px; text-transform: uppercase; text-align: left; font-size: 14px; font-family: LinotypeUnivers-410Cm;">
© Copyright Evenets By Reese Group. All Rights Reserved.
</h3>
</div><!-- footerRight -->
</div><!-- footer -->
</div><!-- footerWrap -->
</body>
</html>
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
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:
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>
$('ul.colleftp li').hover(
function() { $('#colright img').attr('src' $(this).data('image')) },
function() { $('#colright img').attr('src' 'images/services/0.jpg') }
);
ul.colleftp li { cursor:pointer; }
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.
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.
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!
Surely it's a no brainer!
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.
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...
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...
How do i add that jquery code? Where does it go?
In the head of your document, you already have a document ready block, so you just add it in there:
<script type="text/javascript">
$(document).ready(function(){
$('#layerslider').layerSlider({
skinsPath : '/slider/layerslider/skins/',
skin : 'minimal',
thumbnailNavigation : 'hover',
hoverPrevNext : false,
autoPlayVideos : false
});
$('ul.colleftp li').hover(
function() { $('#colright img').attr('src' $(this).data('image')) },
function() { $('#colright img').attr('src' 'images/services/0.jpg') }
);
});
</script>
From your original code, replace :
by :
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;
}
by :
function MM_findObj(n, d) {
return d.getElementById(n);
}
I made those changes, I still get the error but it doesn't tell me what it is. Tells me it's on this line:
function() { $('#colright img').attr('src' $(this).data('image')) },
I am feeling much more optimistic though. :)
function() { $('#colright img').attr('src' $(this).data('image')) },
I am feeling much more optimistic though. :)
<script type="text/javascript">
$(document).ready(function(){
$('#layerslider').layerSlider({
skinsPath : '/slider/layerslider/skins/',
skin : 'minimal',
thumbnailNavigation : 'hover',
hoverPrevNext : false,
autoPlayVideos : false
});
$('ul.colleftp li').hover(
function() { $('#colright img').attr('src' $(this).data('image')) },
function() { $('#colright img').attr('src' 'images/services/0.jpg') }
);
});
</script>
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.
Question has a verified solution.
Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.
Have a better answer? Share it in a comment.
All Courses
From novice to tech pro — start learning today.
Open in new window