I have been searching my arse off for a way to make... no wait.... AN EASY WAY!... to make a website do what I want it to do. I have no experience with Java and most of the info out there that I found was just way over my head. Until I found a small piece of code that was made to do something similar to what I wanted:
Thanks to the guys at http://www.codingforums.com/showthread.php?t=122011
I wanted to change multiple DIV background images when the mouse went over one Hyperlink.
This is what I have come up with using the above mentioned code as reference that is::
Step 1:
Create a script.js file and populate it with the following script:function change(v) {
var target = document.getElementById("home");
var target2 = document.getElementById("courses");
var target3 = document.getElementById("contacts");
if (v == "imgA") {
target.className = "a";
target2.className = "b";
target3.className = "c";
} else if (v == "imgB") {
target.className = "d";
target2.className = "e";
target3.className = "f";
} else if (v == "imgC") {
target.className = "g";
target2.className = "h";
target3.className = "i";
}
}
function changeReset() {
var target = document.getElementById("home");
var target2 = document.getElementById("courses");
var target3 = document.getElementById("contacts");
target.className = "a";
target2.className = "b";
target3.className = "c";
target.className = "d";
target2.className = "e";
target3.className = "f";
target0.className = "g";
target2.className = "h";
target3.className = "i";
}
Step 2:
Create a CSS file called main.css and populate it with the following code:#wrapper {
width: 900px;
height:822px;
margin: 0 auto;
background-image:url(images/back2.jpg);
background-repeat: no-repeat;
}
#header {
width:900px;
height:199px;
position:relative;
margin: 0 auto;
}
#content {
width: 900px;
height:370px;
margin: 0 auto;
position:relative;
}
#menu {
width: 900px;
height:40px;
margin: 0 auto;
position:relative;
top:60px;
}
#menu a{
text-decoration:none;
font-size:24px;
color:#F00;
}
#menu a:hover{
background-color:#FF0;
border-top-left-radius: 15px 15px;
border-top-right-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 15px 15px;
}
#home {
width: 300px;
height:300px;
position:relative;
top:52px;
}
#courses {
width: 300px;
height:300px;
position:relative;
left:300px;
top:-248px;
}
#contacts {
width: 300px;
height:300px;
position:relative;
left:600px;
top:-548px;
}
.a { background-image:url(images/a1_3.png);}
.b { background-image:url(images/a1_2.png);}
.c { background-image:url(images/a1_1.png);}
.d { background-image:url(images/a2_3.png);}
.e { background-image:url(images/a2_2.png);}
.f { background-image:url(images/a2_1.png);}
.g { background-image:url(images/a3_3.png);}
.h { background-image:url(images/a3_2.png);}
.i { background-image:url(images/a3_1.png);}
Step 3:
Create an index.php file and populate it as follows:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="main.css" rel="stylesheet" type="text/css" media="screen" />
<title>Essential Driving School</title>
</head>
<body background="images/back1.jpg" onload="change('imgA'); change('imgB'); change('imgC');">
<div id="wrapper">
<div id="header"><center><img src="images/header.png" width="700" height="171" /></center></div>
<div id="content">Content</div>
<div id="menu">
<table width="900" border="0" align="center" cellpadding="0" cellspacing="2">
<tr align="center" valign="middle">
<td width="300" align="center" valign="middle"><a id="imgA" onmouseover="change('imgA');" onmouseout="changeReset();" href="#">Home</a></td>
<td width="300" align="center" valign="middle"><a id="imgB" onmouseover="change('imgB');" onmouseout="changeReset();" href="#">Courses</a></td>
<td width="300" align="center" valign="middle"><a id="imgC" onmouseover="change('imgC');" onmouseout="changeReset();" href="#">Contact Us</a>
</td>
</tr>
</table>
</div>
<div id="home"></div>
<div id="courses"></div>
<div id="contacts"></div>
</div> <!-- End Of Wrapper -->
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Final Step:
Make sure you have an images directory with all the referenced images available:To see a working example of this page check out:
http://www.garnia.co.za/garnia_temp_eds1/index.php
The steering wheel is made-up of 9 images depending on what link is hovered over 3 are displayed at all times...
This can now be easyly modified to work with more or less images, you just need to tinker with the code a lil...
Hope this helps someone who like me, couldn't find an easier example out there...
