Go Back   TechArena Community > Software > Software Development
Become a Member!
Forgot your username/password?
Tags Active Topics RSS Search Mark Forums Read

Reply
 
Thread Tools Search this Thread
  #1  
Old 27-07-2009
Member
 
Join Date: Jul 2009
Posts: 2
Newbie needs help with CSS roll overs

I have a span roll over on my webpage and being a begginer I cannot figure out how to get my roll over image to center over top of the current image. It worked with ie7 but does not work in other browsers. Please take a look at my page an see if anyone can help me. http://www.markgarro.com/bat.html

Thank you
Glenn
Reply With Quote
  #2  
Old 27-07-2009
Member
 
Join Date: Mar 2008
Posts: 335
Re: Newbie needs help with CSS roll overs

Try this code :

Code:
<head>
<script>

var clipNums=new Array(21,81,95,155,170,230,243,317);

function positionMap() {
document.getElementById('over').style.left = document.getElementById('off').offsetLeft;
document.getElementById('over').style.top = document.getElementById('off').offsetTop;
}

function imgRoll(i){
document.getElementById('over').style.clip="rect(0 "+clipNums[i]+" 19 "+clipNums[i-1]+")";
document.getElementById('over').style.visibility='visible'
}

function imgOut(){
document.getElementById('over').style.visibility='hidden'
}

</script>

<style>

#over{position:absolute;visibility:hidden;z-index:10;}

</style>
</head>

<body onload="positionMap();" onresize="positionMap();">

<map name="a">
<area shape="rect" coords="21,0,81,19" href="#" onmouseover="sh(1);" onmouseout="mo();">
<area shape="rect" coords="95,0,155,19" href="#" id="mnu1" onmouseover="imgRoll(3);" onmouseout="imgOut();">
<area shape="rect" coords="170,0,230,19" href="#" id="mnu2" onmouseover="imgRoll(5);" onmouseout="imgOut();">
<area shape="rect" coords="243,0,317,19" href="#" id="mnu3" onmouseover="imgRoll(7);" onmouseout="imgOut();">
</map>
<img src="/link_imgmap_on.gif" id="over" usemap="#a" border="0" width="322" height="19">
<img src="/link_imgmap.gif" id="off" usemap="#a" border="0" width="322" height="19">

</body>
For more info : Click here
Reply With Quote
  #3  
Old 28-07-2009
Member
 
Join Date: Jul 2009
Posts: 2
Re: Newbie needs help with CSS roll overs

I am so lost with your response. I am sure you are giving me the right info but what you posted is way out of my league. I am not sure where to put any of it. Most of what I have done was by doing google searches and using dreamWeaver. Any help would be great.

Thank you
Reply With Quote
Reply

  TechArena Community > Software > Software Development
Tags: , ,



Thread Tools Search this Thread
Search this Thread:

Advanced Search


Similar Threads for: "Newbie needs help with CSS roll overs"
Thread Thread Starter Forum Replies Last Post
camera roll bug in iphone 4s Luna^Ivery Portable Devices 6 06-11-2011 10:20 PM
iOS 4.1 Camera Roll thumbnails Chin-Mae Portable Devices 6 30-10-2010 05:54 PM
How to Roll back to Ie6 from Ie7 Sloane Windows Software 4 04-12-2009 11:18 PM
EA games roll onto Steam Cyk Video Games 1 20-12-2008 03:13 PM
Roll-up Mouse Pad With Speaker + Hub AvO Portable Devices 1 22-11-2008 03:18 PM


All times are GMT +5.5. The time now is 08:48 AM.