Forum Moderators: open
Could anyone give me some direction to begin on doing this? I am thinking this would require javascript, but if there is an easier way to go about it I would appreciate the help.
The easiest way to show you will be a test page, so here it is. Just copy and paste it to test.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test Page</title>
<!-- Set a border as default -->
<style>#images P {border: 1px solid green;}</style>
<script>
// Find our elements and make them do something onmouseover and onmouseout
function init() {
var imgs = document.getElementById( "images").getElementsByTagName( "P");
for( var i = -1; imgs[ ++i];) {
imgs[ i].onmouseover = borderOn;
imgs[ i].onmouseout = borderOff;
}
}
// This function sets the border
function borderOn() {
var imgs = document.getElementById( "images").getElementsByTagName( "P");
for( var i = -1; imgs[ ++i];)
imgs[ i].style.border = "1px solid red";
}
// This function sets it back to default
function borderOff() {
var imgs = document.getElementById( "images").getElementsByTagName( "P");
for( var i = -1; imgs[ ++i];)
imgs[ i].style.border = "1px solid green";
}
</script>
</head>
<body onload='init();'>
<!-- I didn't have any images so I just used P tags to demonstrate. -->
<!-- I'm sure you can work out to substitute them -->
<div id='images'>
<p>Text 1</p>
<p>Text 2</p>
</div>
</body>
</html>
[edited by: Dabrowski at 6:44 pm (utc) on Dec. 5, 2007]
Maybe I'll just throw in the code so you can see...
In one part of the page I have the following code. And the link itself has a background image made up of two parts: no border and red border...when the link is not hovered over, the no border part of the image displays...when the link is hovered over the image is repositioned to display the red border part.
<div id="intro-box1" class="intro-box">
<div id="launchpad1" class="intro-launchpad">
<a href="/path/to/link/" title="">Link 1</a>
</div>
<div id="launchpad2" class="intro-launchpad">
<a href="/path/to/link/" title="">Link 2</a>
</div>
</div>
In another part of the page I have the following code. The links have background images in the same manner the previous code does.
<ul id="browse-links">
<li id="browse-st"><a href="/path/to/link/" title="">Link 1</a></li>
<li id="browse-ad"><a href="/path/to/link/" title="">Link 2</a></li></ul>
So what I would like to do, is if the user mouses over Link 1 in the first set of code, it repositions the background image to show the red border and the Link 1 in the second set of code also repositions the background image to show the red border...Likewise, if the user mouses over the link 1 in the second set of code, it repositions the image to show the red border and the link 1 in the first set of code repositions to show the red border.
In this situation there would be multiple corresponding links.
So, I'm basically a newbie to javascript (although i have a background in programming so can understand code)...is the test code you gave going to get me on the right track for what I want to do...if so, any pointers on how to get there?
Thanks.
the test code you gave going to get me on the right track for what I want to do
Your problem is basically in 2 parts, first locate the elements we want to faff with, then apply a different style, so yes it's along the right lines, but no it won't convert directly to this situation.
it repositions the background image to show the red border
What background image? You mean in the CSS you have a background URL in there? Why do we need to reposition it to see the border?
In the next example I'll break the javascript down and put some comments in so you can see what it's doing.
