disable an image with onmouseover - problem

rayesteq · Oct 27, 2004

Hi everyBody;

I want to create a web site with using images as buttons.Actualy I manage the changin buttons when a mouse point at them ,but i couldnt find any proper solution when someone click one of my image buttons it will preserves its last image untill clicking anoher image.I wrote i code to make it but in the code as you can see the disabled function is not work?Do you have any idea for this.

my Code is==>>
<script language="JavaScript">

var prevClicked = "";
Imgpath="../images/styleguide/";

function staySet(curr,imgName){

tmpStr = curr.toString();
if (prevClicked == "")
{
document.getElementById(curr).disabled = true;
prevClicked = curr;
}
else
{
document.getElementById(prevClicked).disabled = false;
document.getElementById(curr).disabled = true;
prevClicked = curr;
}
}

function SwapImage(curr,imgName) {

tmpStr = curr.toString();
var swap = event.type;

if (swap == 'mouseover')
{
document.getElementById(curr).src=Imgpath+imgName+'_prs.gif'
document.getElementById(curr).disable=false;
}

if (swap == 'mouseout')
{
document.getElementById(curr).src=Imgpath+imgName+'_def.gif'
}

}
</script>

Thanks for your consideration

rayesteq

chessbot · Oct 27, 2004

Is this what you wanted? Change .inside and .outside to match your images.

Code:

<html>
<style type="text/css">
<!--

div {
	width: 100px;
	height: 40px;
	margin: 10px 10px 10px 10px;
	cursor: hand;
	}

.outside {
	background-color: #FF3333;
	}

.inside {
	background-color: #00FF00;
	}

-->
</style>
<script type="text/javascript">
<!--

last_image = null;

function doClick(btn)
{
  if (last_image != null)
  {
    last_image.className = "outside";
  }
  btn.className = "inside";
  last_image = btn;
}

last_over = null;

function toggle(btn)
{
  if (btn.className == "outside")
  {
    btn.className = "inside";
  }
  else
  {
    if (last_image != btn)
    {
      btn.className = "outside";
    }
  }
}

// -->
</script>
</head>
<body>
<div class="outside" onclick="doClick(this);" onmouseover="toggle(this);" onmouseout="toggle(this);">
Button 1
</div>
<div class="outside" onclick="doClick(this);" onmouseover="toggle(this);" onmouseout="toggle(this);">
Button 2
</div>
<div class="outside" onclick="doClick(this);" onmouseover="toggle(this);" onmouseout="toggle(this);">
Button 3
</div>
<div class="outside" onclick="doClick(this);" onmouseover="toggle(this);" onmouseout="toggle(this);">
Button 4
</div>
<div class="outside" onclick="doClick(this);" onmouseover="toggle(this);" onmouseout="toggle(this);">
Button 5
</div>
</body>
</html>

--Chessbot

"See the TURTLE of enormous girth!"
-- Stephen King, The Dark Tower series

rvaggelen · Feb 24, 2005

great script!

can i take it one step further?? What if the cells have different css id's?? Do you just copy the javascript 5 times and change all the class names, or doesn't it work like that?

cheers,
ronald

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!

disable an image with onmouseover - problem

rayesteq

Programmer

chessbot

Programmer

rvaggelen

Technical User

Similar threads

Part and Inventory Search

Sponsor