In Persuit Of Tech: 2012

Howzit,

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> 
<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...

In Persuit Of Tech

Wednesday 26 September 2012

PHP JAVA CSS Change Multiple DIV on Mouse Over

Step 1:

Step 2:

Step 3:

Final Step: