# Web Easy 8



## RafFor (Dec 16, 2009)

Hello,

I would like to display a bigger image when the mouse go over an icon, in the same page. I found an example in hobbies and events / photo exposition. but I am unable to detect which properties can help to do it. Any help will be appreciated


----------



## ahmorrow (May 5, 2009)

Well... how do you want it layed out?

We could make it so you hover over a small image on the side/top/bottom of the screen and an image in the middle somewhere changes to a larger version of that image.

Or we could make it so you have a gallery of images, and the one you hover over is slightly larger than the rest.


----------



## RafFor (Dec 16, 2009)

Hello,

This exactly what I need : _over a small image on the side/top/bottom of the screen and an image in the middle somewhere changes to a larger version of that image_

I wrote in the past using JS, but I would like to know how to realize it with Web Esay 8.

Thanks for your help


----------



## ahmorrow (May 5, 2009)

Well, if you wrote the script before, why do you need Web Easy to do it?

Just make the site however you want it to look, then have it load an external javascript file.

Put this in your html file.

```
<html>
<head>
<title>MyTitle</title>
<script type="text/javascript" src="myscript.js"></script>
```
Then save this as "myscript.js" in the same directory/folder as the html file.

```
function makeBig(littlePic)
{
getElementById('bigPic.src');
bigPic.src=littlePic.src;
}
```


```
/*
This would be in your <body> tags somewhere
*/
<img src="littlebittypictureofmines112352243.jpg" id="mylittlepicture" onclick="makeBig('mylittlepicture')" />
//Put this where you want the big image
<img src="spacer.gif" id="bigPic" />
```
It doesn't matter what any of the attributes are so long as you name the correct function and input the right ID's in the onclick statements.


----------

