RSS Feed

DonD 2012© No Rights Reserved

Page last updated 25/01/2012 10:24:02

Produced with

Site Feedback

Search

1. Get all the photos you are going to use resized to the size you want to have them showing at when you do the

mouse over, don’t forget to see if the map you use is not under copyright or you might get in trouble. Button images for the normal and mouse over states. Put all these into the same folder so you don’t have to go hunting around for them.

2. Select your map and place it where required.

3. Select the insert rollover button, 9th up on the left, grouped with navbar & themed graphic buttons. Rollover graphic window will pop up and in the “normal” line click “Browse” and go the the graphic for the normal state and insert. Put a tick in the box on the “over” line and “Browse” for that graphic then OK out. Click and drag to insert your button, you can move and resize as you like.

To insert more buttons select the button you have put in then hold down the Ctrl key on your keyboard and at the same time click and drag the button to copy it to your next position.

4. Place your photos where you wont them to pop up on rollover. Right click on the photos in turn select ID from the menu and make a note of there ID’s, it will be something like pic_2, pic_3 and so on. You will need this in a minute. That's the easy bit over with now for a bit of coding.

5a. Copy the code below into your clipboard.

<script language="javascript">

function showit(d) {

document.getElementById(d).style.visibility = "visible";

}

function hideit(d) {

document.getElementById(d).style.visibility = "hidden";

}

</script>

5b. Select the insert HTML code button, second up on the left and draw a rectangle at the top of the page, look on this home page to see were I put mine, and a attach HTML code window will pop up. On the top right of this window click “paste to head” and then OK out. The code you copied has been pasted into the head of the page.

This example is for the Whitby Photo on home page

6. Right click a photo and select “Attach HTML” and you should see a line something like this

<div style="position:absolute; left:422px; top:507px; width:275px; height:89px;  /*MainDivStyle*/ "

The numbers are the position and size of the photo so will be different in each photo, after the last px; there will be a white space with /*MainDivStyle*/. Highlight this text and paste this in it’s place  overflow:hidden; visibility:hidden; So you want the above to look like the code below.

<div style="position:absolute; left:422px; top:507px; width:275px; height:89px; overflow:hidden; visibility:hidden;"  

This code will hide the photo until you rollover the respective button. Alter all the photos with this same extra bit of code  overflow:hidden; visibility:hidden; I find it easy to copy the extra code and paste in place saves typing.

7. Now the  rollover buttons, this is where you will need the Photo ID’s. You are going to right click a button and add some code. You should see a line something like this

<div style="position:absolute; left:398px; top:623px; width:25px; height:25px;/*MainDivStyle*/" >

As like the photos the numbers mean the same thing after the last px: there should be a white space, this again is where you start writing so you end up with something like this

<div style="position:absolute; left:398px; top:623px; width:25px; height:25px; cursor:pointer;cursor:hand" onmouseover="showit('pic_2')" onmouseout="hideit('pic_2')" >

All the above code will be on one line. You change the the photo ID, pic_2 in this case, the the photo ID that the button you are working on is to be used for. Again you can copy and paste the code into each button and change the ID number.

Make sure you do not end up with a double ”>”> at the end of the code.

If you right click the photos/buttons on the .home page in the .wpp file select attach HTML you will see the above added code to give you an idea.

Top

Top

Rollover guide

2/3

2/3