Mouseover div problem with swapping images

BrotherArnold · Aug 9, 2013

Hi,

I'm sure this is simple but not being familiar with JavaScript and looking over other threads and trying things out hasn't got me as far as I would have liked so it's time to short cut and ask for help.

The code below works fine for swapping images on mouseover and mouseout. What I want to do now is add additional functionality to change the image in 'map' to bg_img3 when I mouseover the Home text and back to bg_img2 when I mouseout.

Code:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function swapImage(imgObj, hovered_over)
{
    if (imgObj.id == 'graphic')
    {
        if (hovered_over)
        {
            imgObj.src = 'Images/bg_img1.jpg';
        }
            else
        {
            imgObj.src = 'Images/bg_img2.jpg';
        }    
    }   
}
//-->
</SCRIPT>
</HEAD>
<BODY>

<div id="map">
	<IMG SRC="Images\bg_img2.jpg" onMouseOver="swapImage(this, true);" onMouseOut="swapImage(this, false);" id="graphic">
</div>

<div id="home" onMouseOver="swapImage('home', true);" onMouseOut="swapImage('home', false);">Home</div>

</BODY>
</HTML>

So the last div statement is wrong and I guess I might need another function like swapImage but everything I try places bg_img3 below the 'map' div when I want it to appear within it like the other images. Any help gratefully received.

Brother Arnold

"keep passing the open windows..."

jpadie · Aug 10, 2013

Code:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function swapImage(imgObj, hovered_over)
{
    if (imgObj.id == 'graphic')
    {
        if (hovered_over)
        {
            imgObj.src = 'Images/bg_img1.jpg';
        }
            else
        {
            imgObj.src = 'Images/bg_img2.jpg';
        }    
    }  else if(imgObj.id == 'home') {
    
    	imgObj = document.getElementById('graphic');
    	if (hovered_over)
        {
            imgObj.src = 'Images/bg_img3.jpg';
        }
            else
        {
            imgObj.src = 'Images/bg_img2.jpg';
        }    
    }
}
//-->
</SCRIPT>
</HEAD>
<BODY>

<div id="map">
	<IMG SRC="Images\bg_img2.jpg" onMouseOver="swapImage(this, true);" onMouseOut="swapImage(this, false);" id="graphic">
</div>

<div id="home" onMouseOver="swapImage(this, true);" onMouseOut="swapImage(this, false);">Home</div>

</BODY>
</HTML>

BrotherArnold · Aug 11, 2013

Excellent thanks for that jpadie. That has helped me a lot to understand more on how javascript works. I've the changed the code slightly so that I now have a background image for the map div so that when I hover over Home it will display a png with a transparent background over that background image. It works fine except for one annoying bit which hopefully you or someone else might be able to explain. When I resize the browser window to a width less than the background image width, it hides/removes the background image when I hover over Home and it just displays the png which has the same dimensions. This behaviour only seems to happen with Chrome, it works fine in IE. Any ideas how to stop that? Cheers.

Code:

<HTML>
<HEAD>
<style>
#map{
	background-image:url(Images/sitemap_bg.jpg);
	background-repeat:no-repeat;
	background-color:#ffffff;
	height:355px;	
}

#home{
	position: relative;
	margin:-244px 0px 0px 239px;
	padding:0px 0px 0px 0px;
	font-size:24px;

div{
	padding:0px;
	margin:0px;
}

</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
function swapImage(imgObj, hovered_over)
{
	if(imgObj.id == 'home') {
    
        imgObj = document.getElementById('graphic');
        if (hovered_over)
        {
            imgObj.src = 'Images/bg_img3.png';
        }
            else
        {
            imgObj.src = 'Images/sitemap_bg.jpg';
        }    
    }
}
//-->
</SCRIPT>
</HEAD>
<BODY>

<div id="map">
	<IMG SRC="" ID="graphic">
</div>

<div id="home" onMouseOver="swapImage(this, true);" onMouseOut="swapImage(this, false);">Home</div>

</BODY>
</HTML>

Brother Arnold

"keep passing the open windows..."

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Mouseover div problem with swapping images

BrotherArnold

Technical User

jpadie

Technical User

BrotherArnold

Technical User

Similar threads

Part and Inventory Search

Sponsor