Image hover and change

[berkley]

Yeah so here is my problem i want a page like this (http://www.thegreatorganizer.com/) with the 4 panels and the same hover effect I have tried to find some I looked everywhere I found some other cool codes but nothing that helped me do that can anyone help? :confused: :confused: :confused:

[Nile]

Do you want the image to change? Get lighter? Have the image change and text? Or Get lighter and Text?

[rangana]

You should prepare two images, the hovered image and the default image.
See basic example:


<style type="text/css">
img{width:300px;height:250px;}
#wrap{width:650px;padding:10px;margin:auto;}
</style>
<div id="wrap">
<img src="http://h1.ripway.com/rangana/images/Picture1.png" alt="myimage" onmouseover="this.src='http://h1.ripway.com/rangana/images/Picture5.jpg'" onmouseout="this.src='http://h1.ripway.com/rangana/images/Picture1.png'">

<img src="http://h1.ripway.com/rangana/images/Picture2.jpg" alt="myimage" onmouseover="this.src='http://h1.ripway.com/rangana/images/Picture6.jpg'" onmouseout="this.src='http://h1.ripway.com/rangana/images/Picture2.jpg'">

<img src="http://h1.ripway.com/rangana/images/Picture3.jpg" alt="myimage" onmouseover="this.src='http://h1.ripway.com/rangana/images/Picture7.jpg'" onmouseout="this.src='http://h1.ripway.com/rangana/images/Picture3.jpg'">

<img src="http://h1.ripway.com/rangana/images/Picture4.jpg" alt="myimage" onmouseover="this.src='http://h1.ripway.com/rangana/images/Picture8.jpg'" onmouseout="this.src='http://h1.ripway.com/rangana/images/Picture4.jpg'">
</div>


Hope it helps.

[berkley]

You should prepare two images, the hovered image and the default image.
See basic example:


<style type="text/css">
img{width:300px;height:250px;}
#wrap{width:650px;padding:10px;margin:auto;}
</style>
<div id="wrap">
<img src="http://h1.ripway.com/rangana/images/Picture1.png" alt="myimage" onmouseover="this.src='http://h1.ripway.com/rangana/images/Picture5.jpg'" onmouseout="this.src='http://h1.ripway.com/rangana/images/Picture1.png'">

<img src="http://h1.ripway.com/rangana/images/Picture2.jpg" alt="myimage" onmouseover="this.src='http://h1.ripway.com/rangana/images/Picture6.jpg'" onmouseout="this.src='http://h1.ripway.com/rangana/images/Picture2.jpg'">

<img src="http://h1.ripway.com/rangana/images/Picture3.jpg" alt="myimage" onmouseover="this.src='http://h1.ripway.com/rangana/images/Picture7.jpg'" onmouseout="this.src='http://h1.ripway.com/rangana/images/Picture3.jpg'">

<img src="http://h1.ripway.com/rangana/images/Picture4.jpg" alt="myimage" onmouseover="this.src='http://h1.ripway.com/rangana/images/Picture8.jpg'" onmouseout="this.src='http://h1.ripway.com/rangana/images/Picture4.jpg'">
</div>


Hope it helps.

yes thats awesome and I put a <a href="link"> around the <img> tag to hyper link them right?

[Nile]

Yes. Your right.
But when you do this it will also include a border, so you would want this:


<style type="text/css">
img{width:300px;height:250px;border:none;}
#wrap{width:650px;padding:10px;margin:auto;}
</style>
<div id="wrap">
<img src="http://h1.ripway.com/rangana/images/Picture1.png" alt="myimage" onmouseover="this.src='http://h1.ripway.com/rangana/images/Picture5.jpg'" onmouseout="this.src='http://h1.ripway.com/rangana/images/Picture1.png'">

<img src="http://h1.ripway.com/rangana/images/Picture2.jpg" alt="myimage" onmouseover="this.src='http://h1.ripway.com/rangana/images/Picture6.jpg'" onmouseout="this.src='http://h1.ripway.com/rangana/images/Picture2.jpg'">

<img src="http://h1.ripway.com/rangana/images/Picture3.jpg" alt="myimage" onmouseover="this.src='http://h1.ripway.com/rangana/images/Picture7.jpg'" onmouseout="this.src='http://h1.ripway.com/rangana/images/Picture3.jpg'">

<img src="http://h1.ripway.com/rangana/images/Picture4.jpg" alt="myimage" onmouseover="this.src='http://h1.ripway.com/rangana/images/Picture8.jpg'" onmouseout="this.src='http://h1.ripway.com/rangana/images/Picture4.jpg'">
</div>
And then to include the links:


<style type="text/css">
img{width:300px;height:250px;border:none;}
#wrap{width:650px;padding:10px;margin:auto;}
</style>
<div id="wrap">
<a href="#"><img src="http://h1.ripway.com/rangana/images/Picture1.png" alt="myimage" onmouseover="this.src='http://h1.ripway.com/rangana/images/Picture5.jpg'" onmouseout="this.src='http://h1.ripway.com/rangana/images/Picture1.png'"></a>

<a href="#"><img src="http://h1.ripway.com/rangana/images/Picture2.jpg" alt="myimage" onmouseover="this.src='http://h1.ripway.com/rangana/images/Picture6.jpg'" onmouseout="this.src='http://h1.ripway.com/rangana/images/Picture2.jpg'"></a>

<a href="#"><img src="http://h1.ripway.com/rangana/images/Picture3.jpg" alt="myimage" onmouseover="this.src='http://h1.ripway.com/rangana/images/Picture7.jpg'" onmouseout="this.src='http://h1.ripway.com/rangana/images/Picture3.jpg'"></a>

<a href="#"><img src="http://h1.ripway.com/rangana/images/Picture4.jpg" alt="myimage" onmouseover="this.src='http://h1.ripway.com/rangana/images/Picture8.jpg'" onmouseout="this.src='http://h1.ripway.com/rangana/images/Picture4.jpg'"></a>
</div>
Change the highlighted # to your link.

@Rangana, cool pics, where'd you get them?

[berkley]

alright cool thanks again guys thanks so much =)

[rangana]

@Rangana, cool pics, where'd you get them?

Haha. Thanks, that was an image from a PPT that I have :p

[berkley]

whats PPT?