Wednesday 26 September 2012

PHP JAVA CSS Change Multiple DIV on Mouse Over

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


Wednesday 9 November 2011

Oh Yea! Integrated My uTorrent with a facebook fanpage!

I created a little app which uses the blat.dll file by Toby Korn... and a handy runwait.dll I found at Stuart Dalbys Powerbuilder Page. I used powerbuilder v10.0 to write this app.

What it does is this... from a command line I can run my app with the subject line of the mail and it sends the mail to the e-mail address specified in the settings file.
So I setup a fan page for myself with the mobile e-mail function. I set my app to sent the e-mail to that facebook fan page e-mail address.
Then I setup utorrent to run the program with the %N argument. and also Run if state changes withe the N% and M% arguments.

The result is that any1 who likes the page will be updated as to which of my torrent files have finished downloading, or if the status of any of the downloads have changed... (So if i have friends who want something I have downloaded, they can just ask because they know what I have downloaded or am busy downloading)


Well, Im chuffed!


Cheers!


OH, and the Honda with the new used engine is still going strong, Pushed it to 180km/h the other day with no issues....

Friday 28 October 2011

Engine In - All Good!

Yo0u may not believe me, but after we swopped the engines, the car started 1st time, not a single delay. Turned the key and it started perfectly. Been driving it for 2 weeks now and all is good. Got to drain the oil and replace it this weekend.

Things going on this weekend?
1 ) Got to complete the last 2 cables in the granny flat, then its ready for the oak to come plaster and tile.
2 ) Got to organise my study, I need place to work...
3 ) Got to get my security cameras up and running how I want them.
4 ) Oh yes, replacing the oil in the Ballade!
5 ) Cutting the grass....I hate this...
6 ) If the weather permits, going to have a swim in the crystal blue pool... (We just replaced the filter sand and boy, what a difference....


Anyhoo, thats my update for now...

Thursday 6 October 2011

My Engine Is Arriving Today!

Ohhh Yeah!
Finally after waiting a whole month, my new "Used" engine will be arriving today. Ordered from Spares Boyz in Durban, made final payment yesterday and they have promised it would arrive by me in Johannesburg today. Found someone with a coffin hoist I can borrow to do the heavy lifting and lowering. Now here's hoping that all goes well with the engine swap. hope i can get a hold of all the gaskets i need. Road Hogz has informed me that there are two typed of inlet gaskets for my Honda Ballade 150i, I need to take a sample so they can see if the have the one i need. They only keep stock of the one kind. Exhaust gaskets should be OK, they have stock of them.
My Father In-Law is bringing the expertise to the table, I have never really worked on engines, so here's hoping we get this right.


Wednesday 31 August 2011

iPhone Blog

photo

working hard...

Ok, Ok... So i got something else to do 1st...

My 1999 Honda 150i Ballade has been standing for over a year in the back yard... left to the elements and ... dogs...  Finally i decided to do something about getting my favorite lil car back on the road... so alas... no new Arduino parts until my car is back on the road... Poor thing needs a new engine... well, probably just needs a new cylinder head, but because i don't know what the assholes who worked on it have done, i don't want to take any chances.

The car broke down on us while we were on our way to visit my in-laws in Welkom. While we were there we ended up buying a new car, 2006 Honda Civic 180LXI VTEC. We looked around for a open place to check if they could fix the ballade, the only place willing that was open suggested they open the engine and refurbish it. Charge was like R12000.00. We suggested that it would be a lot cheaper to just get a new used imported engine. They convinced us that it would be better to fix the engine we had, after all, no telling what might be wrong with the new used engine. Months later we returned to Welkom to fetch the "Repaired Honda Ballade" on the way back to Johannesburg, the car overheated... so there we were back to Welkom and back to the morons who fucked up the job. Later found out that they charged an extra R4000.00 to replace a water pump or something... Anyway, get the car back and it still over heats when driving in a congested town environment. Call the assholes who say we need to remove the thermostat. which we do and keep on driving for a couple of months... On my war home from work, the engine starts making this loud knocking sound.. All i can do is hope i make it home before the engine gives up on me... (Really not lis to wait 2 hours for a pickup) Anyway, i make it home an left the car until now...

This time I do things my self, and make sure its done correctly....(Yes I'm going to have a lot to learn about engines n stuff)

These are the pictures of the Cam and Cam Holder Thingies...

oops, sorry, this is the picture of my daughter showing the camera what she thinks of the assholes who worked on our ballade




Wednesday 10 August 2011

Arduino MEGA 2560 - Part II

Howzit,
Just a quick update on my progress with the Arduino Controller. I have been tinkering with it and some LEDs, I think I pretty much got the basics of the programming down. It uses the C Programming lanuage and so far it doesnt seem to difficult. Im ordering the following items at the end of the month so that I can explore further the capabilities of this awesome little device.

Ethernet Shield
ARDS-001 R435.00
 

R435.00
LM35 Temperature Sensor
SEN-LM35 R25.00
 

R50.00
Mega Proto Shield Kit
ARDS-014 R195.00
 

R195.00
LCD 2x16 Green
DISP-LCD216-G R120.00
 

R240.00
Microswitch 5mm 10 pack
COMP-MICSW5 R15.00
 

R15.00
Stackable Header 8-Pin
COMP-STHD8 R6.50
 

R71.50
Real Time Clock Module
.
COMP-RTCM R190.00
 

R190.00

This is gona be Awesome!