Member Avatar for mvchandoo

I had problem with mouse out in div. i tried for one long day in vain. can any one do it. it was an urgent issue.Thank you in advance.
the code is

<!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>
<title>The test</title>
</head>
<script type="text/javascript">
function changeStyle(div)
{

document.getElementById(div).innerHTML='<a href="index.php?id=1"><img alt="Eon Beats" src="../cmsfiles/artist/3/EonBeats_web.jpg"/></a>';
}

function changeStyleBack(div)
{
//alert('no hover')
document.getElementById(div).innerHTML='<a href="index.php?id=1"><img alt="Eon Beats" src="../cmsfiles/artist/2/Michelle Martinez cropped.jpg"/></a>';
}
</script>
<!--<style type="text/css">
.home a:hover{
background-color:#000000;
background-image:none;
}
</style>-->
<body>
<table border="0" width="400" cellspacing="1" cellpadding="5" align="center">
       <tr>

<td>
<div id="im_1" onmouseover="changeStyle('im_1')" onmouseout="changeStyleBack('im_1')">
<a href="index.php?id=2">
<img src='../cmsfiles/artist/2/Michelle Martinez cropped.jpg' alt='The Groove Academy'></a></div>
</td>
<td>
<div id="im_2" onmouseover="changeStyle('im_2')" onmouseout="changeStyleBack('im_2')">
<a href="index.php?id=3">
<img src='../cmsfiles/artist/3/EonBeats_web.jpg' alt='Eon Beats'></a></div>
</td>
<td>
<div id="im_3" onmouseover="changeStyle('im_3')" onmouseout="changeStyleBack('im_3')">
<a href="index.php?id=4">
<img src='../cmsfiles/artist/4/Boogaloo Anita-1.jpg' alt='Boogaloo Crew'></a></div>
</td>
<td>
<div id="im_4" onmouseover="changeStyle('im_4')" onmouseout="changeStyleBack('im_4')">

<a href="index.php?id=5">
<img src='../cmsfiles/artist/5/ReelSessions_web.jpg' alt='Reel Sessions'></a></div>
</td>
              </tr>
<td>
<div id="im_5" onmouseover="changeStyle('im_5')" onmouseout="changeStyleBack('im_5')">
<a href="index.php?id=6">
<img src='../cmsfiles/artist/6/FowlPlay_web.jpg' alt='Fowl Play'></a></div>
</td>
<td>
<div id="im_6" onmouseover="changeStyle('im_6')" onmouseout="changeStyleBack('im_6')">
<a href="index.php?id=22">
<img src='../cmsfiles/artist/22/Dirty Hendrix_web.jpg' alt='Dirty Hendrix'></a></div>
</td>
<td>
<div id="im_7" onmouseover="changeStyle('im_7')" onmouseout="changeStyleBack('im_7')">

<a href="index.php?id=40">
<img src='../cmsfiles/artist/40/flatwound.jpg' alt='Flatwound'></a></div>
</td>
</tr>
    </table>                 
</body>
</html>
Edited by mike_2000_17 because: Fixed formatting
  • 4 Contributors
  • 5 Replies
  • 151 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Troy III

Recommended Answers

All 5 Replies

Member Avatar for Thirusha

Can u give an explanation of what the problem is?

I have tried this, and on the onmouseover event, the innerhtml is changed. I had removed the images and just places text since i dont have the images.

Member Avatar for beeerlover

There might be other problems but at first glance I notice {your old code}:

<!--<style type="text/css">
.home a:hover{
background-color:#000000;
background-image:none;
}
</style>-->

It looks to me like you are commenting out the style tag, telling the browser to ignore it. I think it should be {your new code}:

<style type="text/css"><!--
.home a:hover{
background-color:#000000;
background-image:none;
}
--></style>

Hope that does the trick. Gotta luv how daniweb's code highlighting automatically shows where the problem is in your code by the black color :)

Member Avatar for Troy III

I had problem with mouse out in div. i tried for one long day in vain. can any one do it. it was an urgent issue.Thank you in advance.
the code is...

That's because you are creating a situation of infinite "mouseover" event occurrence.

Edited by Troy III because: n/a
Member Avatar for mvchandoo

Hi Thanks to all
My problem is when onmouseover the image is changing but after mouseout image have to return to its backstage. but it is not returning to backstage. the onmouseover event image is setting up.
however
I resolved the problem by setting up the onmouseover events to anchor tag.
Thankyou

Member Avatar for Troy III

Hi Thanks to all
My problem is when onmouseover the image is changing but after mouseout image have to return to its backstage. but it is not returning to backstage. the onmouseover event image is setting up.
however
I resolved the problem by setting up the onmouseover events to anchor tag.
Thankyou

Yes that should break the recursive mouseover rising event, but what about second mouseover? That is: after the mouseout event has taken place? It will most probably die. Of course if you don't write the event handler along with the innerHTML of the element you've changed, that is.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.