I have three menu images Image1.gif, Image2.gif, and Image 3.gif. I want to click on Image1.gif and have it change to Image1_over.gif which is of a different color. When I click on the other image, it should also change to the "_over.gif" for the particular image but the first one returns to original.
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!
-
Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
OnClick change image 1
- Thread starter Pereayel
- Start date
-
1
- #2
This should work:
-kaht
Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>title test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">
var lastClicked = false;
function changeImage(obj) {
//check to see if we've just clicked the object that has already been clicked
if (lastClicked && lastClicked.src == obj.src) {
return false;
}
//change the last clicked item back to it's original state
if (lastClicked) {
lastClicked.src = lastClicked.src.replace(/\_over/, "");
}
//set the lastClicked image to one currently clicked
lastClicked = obj;
obj.src = obj.src.replace(/\.gif/, "_over.gif");
}
</script>
<style type="text/css"></style>
</head>
<body>
<img src="image1.gif" onclick="chageImage(this)" />
<img src="image2.gif" onclick="chageImage(this)" />
<img src="image3.gif" onclick="chageImage(this)" />
</body>
</html>-kaht
Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson
- Thread starter
- #3
kaht, thanks for your reply. There seem to be an error in the Javascript thst I'm unable to determine> I copied the the code you gave and added <a href="#">...</a> around the img tag. When I click on the image nothing happens and I get an "Error on page" at the bottom of the page.
Adding the empty anchors is completely unnecessary and just wasted markup - you should probably remove them.
As far as the errors are concerned, it's probably because of my botched copy/paste job. Make the following changes:
-kaht
Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson
As far as the errors are concerned, it's probably because of my botched copy/paste job. Make the following changes:
Code:
<img src="image1.gif" onclick="cha[!]n[/!]geImage(this)" />
<img src="image2.gif" onclick="cha[!]n[/!]geImage(this)" />
<img src="image3.gif" onclick="cha[!]n[/!]geImage(this)" />-kaht
Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson
- Thread starter
- #5
- Thread starter
- #6
I wouldn't use javascript for this, just have your html loaded so that the first image is the correct file. However, once the page loads you will have to set up the lastClicked variable to point to the first image:
-kaht
Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>title test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">
var lastClicked = false;
function changeImage(obj) {
//check to see if we've just clicked the object that has already been clicked
if (lastClicked && lastClicked.src == obj.src) {
return false;
}
//change the last clicked item back to it's original state
if (lastClicked) {
lastClicked.src = lastClicked.src.replace(/\_over/, "");
}
//set the lastClicked image to one currently clicked
lastClicked = obj;
obj.src = obj.src.replace(/\.gif/, "_over.gif");
}
[!]window.onload = function () {
lastClicked = document.getElementById("firstImage");
};[/!]
</script>
<style type="text/css"></style>
</head>
<body>
<img src="[!]image1_over.gif[/!]" [!]id="firstImage"[/!] onclick="changeImage(this)" />
<img src="image2.gif" onclick="changeImage(this)" />
<img src="image3.gif" onclick="changeImage(this)" />
</body>
</html>-kaht
Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson
- Thread starter
- #8
- Thread starter
- #9
I'm trying to add a mouseover and mouseout behavior to the script above and I added the 2 functions below to implement that. The issues are when I place the mouse over the selected tab I get an image in the form Image1_over_over.gif. Any help will gratly be appreciated.
function handleOver(obj)
{
obj.src = obj.src.replace(/.gif$/, '_over.gif').replace(/.jpg$/, '_over.jpg');
}
function handleOut(obj)
{
obj.src = obj.src.replace(/_over.gif$/, '.gif').replace(/_over.jpg$/, '.jpg');
}
function handleOver(obj)
{
obj.src = obj.src.replace(/.gif$/, '_over.gif').replace(/.jpg$/, '_over.jpg');
}
function handleOut(obj)
{
obj.src = obj.src.replace(/_over.gif$/, '.gif').replace(/_over.jpg$/, '.jpg');
}
Hi
Are you sure this is your actual code ? Because there is no such error in it. Only the period ( . ) should be escaped in the regular expressions, but that can not generate such problem.
Could you paste the [tt]img[/tt] tags to see how you call them ? The described error would appear if you have :
Feherke.
Are you sure this is your actual code ? Because there is no such error in it. Only the period ( . ) should be escaped in the regular expressions, but that can not generate such problem.
Code:
function handleOver(obj)
{
obj.src = obj.src.replace(/[red]\[/red].gif$/, '_over.gif').replace(/[red]\[/red].jpg$/, '_over.jpg');
}
function handleOut(obj)
{
obj.src = obj.src.replace(/_over[red]\[/red].gif$/, '.gif').replace(/_over[red]\[/red].jpg$/, '.jpg');
}
Code:
<img src="Image1.jpg" onmouseover="handleOver(this)" onmouseout="handleOver(this)">Feherke.
- Thread starter
- #11
Perharps it's the way I'm calling them. Below is a portion of my code.
<img id="firstImage" src="/home/img/Image1_over.gif" width="95" height="19" title="New" onclick="changeImage(this);" onmouseover="handleOver(this);" onmouseout="handleOut(this);" />
<img src="/home/img/Image2.gif" width="95" height="19" title="Popular" onclick="changeImage(this);" onmouseover="handleOver(this);" onmouseout="handleOut(this);" />
<img id="firstImage" src="/home/img/Image1_over.gif" width="95" height="19" title="New" onclick="changeImage(this);" onmouseover="handleOver(this);" onmouseout="handleOut(this);" />
<img src="/home/img/Image2.gif" width="95" height="19" title="Popular" onclick="changeImage(this);" onmouseover="handleOver(this);" onmouseout="handleOut(this);" />
Hi
Wait a moment. I just remembered the beginning of the thread.
The problem is that you are combining two things : the rollover change and the on click change.
Apply abit of KISS principle and turn back to Kaht's code :
Assuming that you do not want any rollover effect for the "pressed" image.
Feherke.
Wait a moment. I just remembered the beginning of the thread.
The problem is that you are combining two things : the rollover change and the on click change.
Apply abit of KISS principle and turn back to Kaht's code :
JavaScript:
function handle[red]Change[/red](obj)
{
if (lastClicked && lastClicked.src == obj.src) {
return false;
}
if (obj.src.match(/_over)) {
obj.src = obj.src.replace(/_over\.gif$/, '.gif').replace(/_over\.jpg$/, '.jpg');
} else {
obj.src = obj.src.replace(/\.gif$/, '_over.gif').replace(/\.jpg$/, '_over.jpg');
}
}
HTML:
<img id="firstImage" src="/home/img/Image1_over.gif" width="95" height="19" title="New" onclick="changeImage(this);" onmouseover="handle[red]Change[/red](this);" onmouseout="handle[red]Change[/red](this);" />
<img src="/home/img/Image2.gif" width="95" height="19" title="Popular" onclick="changeImage(this);" onmouseover="handle[red]Change[/red](this);" onmouseout="handle[red]Change[/red](this);" />Feherke.
- Thread starter
- #13
Hi
Hmm... I see the problem now. No, not the problem you mentioned, I can not reproduce that. But the two effect's results are hitting each other... And for now I have no time to review it completely.
Feherke.
Hmm... I see the problem now. No, not the problem you mentioned, I can not reproduce that. But the two effect's results are hitting each other... And for now I have no time to review it completely.
Feherke.
- Thread starter
- #15
- Status
