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!

Register Log in
  • Congratulations bkrike on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Image Rollover Help

Status
Not open for further replies.
mawilliams

mawilliams

Technical User
Jun 20, 2003
30
GB
I have a navbar on a page which shows and hides various elements. Each button has an OUT state an OVER state and a CLICK state (which is the same images as the OVER state. I need it so the when the button is clicked it stays on the CLICK state, then if another button is clicked the previous button goes back to the OUT state.

How is this achieved?
 
Sort by date Sort by votes
How is this achieved?
Click to expand...
It's achieved by you providing us with your code first so that we can help you make the necessary adjustments.

-kaht

...looks like you don't have a job, so why don't you get out there and feed Tina.
[banghead]
 
Upvote 0 Downvote
Sorry here's the code:

What I have here works, but when you rollover then rollout the clicked image again, it switches back to the rolled out image.

<script>
var outState;
var imageFlip;

function checkVar(event)
{
if (event == "over")
{
mouseOver();
}
else if (event == "click")
{
imageReset();
mouseOver();
outState = 1;
}
else if (event == "out")
{
if (outState == 1)
{
null
outState = 2;
}
else
{
mouseOut();
}
}
}

function mouseOver()
{
if (imageFlip == 1)
{
document.images["image1"].src = "Images/GIF/interfaceServices/images/servicesStrategic_011.gif";
}
else if (imageFlip == 2)
{
document.images["image2"].src = "Images/GIF/interfaceServices/images/servicesStrategic_016.gif";
}
else if (imageFlip == 3)
{
document.images["image3"].src = "Images/GIF/interfaceServices/images/servicesStrategic_012.gif";
}
}

function mouseOut()
{
if (imageFlip == 1)
{
document.images["image1"].src = "Images/GIF/interfaceServices/images/servicesStrategic_01-03.gif";
}
else if (imageFlip == 2)
{
document.images["image2"].src = "Images/GIF/interfaceServices/images/servicesStrategic_06-15.gif";
}
else if (imageFlip == 3)
{
document.images["image3"].src = "Images/GIF/interfaceServices/images/servicesStrategic_02-07.gif";
}
}

function imageReset()
{
document.images["image1"].src = "Images/GIF/interfaceServices/images/servicesStrategic_01-03.gif";
document.images["image2"].src = "Images/GIF/interfaceServices/images/servicesStrategic_06-15.gif";
document.images["image3"].src = "Images/GIF/interfaceServices/images/servicesStrategic_02-07.gif";
}

</script>

</head>
<body>
<p><a href="#" OnMouseOver="imageFlip = 1; checkVar('over');" OnMouseOut="checkVar('out');" onClick="checkVar('click');"><img src="Images/GIF/interfaceServices/images/servicesStrategic_01-03.gif" name="image1" width="187" height="25" border="0"></a></p>
<p><a href="#" OnMouseOver="imageFlip = 2; checkVar('over');" OnMouseOut="checkVar('out');" onClick="checkVar('click');"><img src="Images/GIF/interfaceServices/images/servicesStrategic_06-15.gif" name="image2" width="187" height="25" border="0"></a></p>
<p><a href="#" OnMouseOver="imageFlip = 3; checkVar('over');" OnMouseOut="checkVar('out');" onClick="checkVar('click');"><img src="Images/GIF/interfaceServices/images/servicesStrategic_02-07.gif" name="image3" width="187" height="25" border="0"></a> </p>
</body>
</html>

This isn't the actual page, but a shorter test page to try and get it working. I'm also aware this may not be the best way of doing this, but I'm new to JavaScript so it's the only way I could think of doing it...........many thanks in advance.
 
Upvote 0 Downvote
Try this:
Code: 
<script>
var outState;
var imageFlip;
var currentClicked = 0;

    function checkVar(event) {
        if (event == "over") {
            mouseOver();
        }
        else if (event == "click") {
            imageReset();
            currentClicked = imageFlip;
            mouseOver();
            outState = 1;
        }
        else if (event == "out") {
            if (outState == 1) {
                null
                outState = 2;
            }
            else {
                mouseOut();
            }    
        }
    }        
        
    function mouseOver() {
        if (imageFlip == 1) {
            document.images["image1"].src = "Images/GIF/interfaceServices/images/servicesStrategic_011.gif";
        }
        else if (imageFlip == 2) {
            document.images["image2"].src = "Images/GIF/interfaceServices/images/servicesStrategic_016.gif";
        }
        else if (imageFlip == 3) {
            document.images["image3"].src = "Images/GIF/interfaceServices/images/servicesStrategic_012.gif";
        }
    }
    
    function mouseOut() {
        if (imageFlip == 1 && currentClicked != 1) {
            document.images["image1"].src = "Images/GIF/interfaceServices/images/servicesStrategic_01-03.gif";
        }
        else if (imageFlip == 2 && currentClicked != 2) {
            document.images["image2"].src = "Images/GIF/interfaceServices/images/servicesStrategic_06-15.gif";
        }
        else if (imageFlip == 3 && currentClicked != 3) {
            document.images["image3"].src = "Images/GIF/interfaceServices/images/servicesStrategic_02-07.gif";
        }
    }    
    
    function imageReset()
    {        
        document.images["image1"].src = "Images/GIF/interfaceServices/images/servicesStrategic_01-03.gif";
        document.images["image2"].src = "Images/GIF/interfaceServices/images/servicesStrategic_06-15.gif";
        document.images["image3"].src = "Images/GIF/interfaceServices/images/servicesStrategic_02-07.gif";
    }        
            
</script>

</head>
<body>
  <p><a href="#" OnMouseOver="imageFlip = 1; checkVar('over');" OnMouseOut="checkVar('out');" onClick="checkVar('click');"><img src="Images/GIF/interfaceServices/images/servicesStrategic_01-03.gif" name="image1" width="187" height="25" border="0"></a></p>
  <p><a href="#" OnMouseOver="imageFlip = 2; checkVar('over');" OnMouseOut="checkVar('out');" onClick="checkVar('click');"><img src="Images/GIF/interfaceServices/images/servicesStrategic_06-15.gif" name="image2" width="187" height="25" border="0"></a></p>
  <p><a href="#" OnMouseOver="imageFlip = 3; checkVar('over');" OnMouseOut="checkVar('out');" onClick="checkVar('click');"><img src="Images/GIF/interfaceServices/images/servicesStrategic_02-07.gif" name="image3" width="187" height="25" border="0"></a> </p>
</body>
</html>

-kaht

...looks like you don't have a job, so why don't you get out there and feed Tina.
[banghead]
 
Upvote 0 Downvote
That's superb. Thanks very much for your help Kaht.

Just out of interest, do you think there's a better way of achieving this type of task?
 
Upvote 0 Downvote
I think you're pretty safe using the above method.

-kaht

...looks like you don't have a job, so why don't you get out there and feed Tina.
[banghead]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
569
waubain
waubain
Raj Kumar
  • Locked
  • Question
Attached Formula image to add in javascript
Replies
1
Views
300
gmmastros
gmmastros
tyutghf
  • Locked
  • Question
Konami code help 3
Replies
10
Views
589
tyutghf
tyutghf
Disskyz
  • Locked
  • Question
Need help with javascript date 1
Replies
4
Views
309
Smurfmania
Smurfmania
obtur
  • Locked
  • Question
function below calculates day of the week for any given date. not returning correctly, plz help
Replies
2
Views
281
obtur
obtur

Part and Inventory Search

Sponsor

Back
Top