How do I make a disjointed/remote rollover in DW8?

Basically, the effect I\m looking for is; when the user mouses over a certain image or text, another image in another part of the page rolls over.

do you mean like this?

http://www.tiptopvans.co.uk/blue_dropside.htm

Basically, the main start image has an id name i.e. "main"

on the smaller images, choose "change property" from the list in the behaviours panel.

When the window opens use these settings:

Type of object = IMG
Named object=image "main"
New Value= (path to your next picture)

just view the source of the page i posted. Seems strange but once you get the hang of it
it is very easy to do!

That's exactly what I mean rolda hayes.

As I don't code, is there another way I can do it with Dreamweaver 8?

If you look at the script in this page I made, I think you will find what your looking for:

http://www.aweddingshowcase.com/rentals.html



This needs to go in the Head:

<SCRIPT language=JavaScript type=text/javascript>
<!--on and off images for rollover
if(document.images) {
pics = new Array();
 
//disjointedrollver images
pics[1] = new Image();
pics[1].src = "";
pics[2] = new Image();
pics[2].src = "images/rentals/cardboxes/cake_white.jpg"; 
pics[3] = new Image();
pics[3].src = "images/rentals/cardboxes/church_off_white.jpg"; pics[4] = new Image();
pics[4].src = "images/rentals/cardboxes/mailbox_ivory.jpg"; 
pics[5] = new Image();
pics[5].src = "images/rentals/cardboxes/small_mailbox_ivory.jpg"; 
pics[6] = new Image();
pics[6].src = "images/rentals/cardboxes/treasure_chest_white_blue_lace.jpg"; 
pics[7] = new Image();
pics[7].src = "images/rentals/cardboxes/treasure_chest_ivory_gold_lace.jpg";
pics[8] = new Image();
pics[8].src = "images/rentals/cardboxes/treasure_chest_ivory_copper_lace.jpg";
pics[9] = new Image();
pics[9].src = "images/rentals/cardboxes/gazebo_ivory.jpg";
pics[10] = new Image();
pics[10].src = "images/rentals/cardboxes/bird_cage_silver_red_and_white_lace.jpg";
pics[11] = new Image();
pics[11].src = "images/rentals/cardboxes/bird_cage_gold_white_lace.jpg";
pics[12] = new Image();
pics[12].src = "images/rentals/cardboxes/bird_cage_white_dark_blue_lace.jpg";
pics[13] = new Image();
pics[13].src = "images/rentals/cardboxes/bird_cage_ivory_light_blue_lace.jpg";
pics[14] = new Image();
pics[14].src = "images/rentals/cardboxes/bird_cage_off_white_purple_lace.jpg";
pics[15] = new Image();
pics[15].src = "images/rentals/cardboxes/tiki_hut_ivory.jpg";
pics[16] = new Image();
pics[16].src = "";
pics[17] = new Image();
pics[17].src = "images/rentals/cardboxes/sm_cake_white.jpg"; 
pics[18] = new Image();
pics[18].src = "images/rentals/cardboxes/sm_church_off_white.jpg"; pics[19] = new Image();
pics[19].src = "images/rentals/cardboxes/sm_mailbox_ivory.jpg"; 
pics[20] = new Image();
pics[20].src = "images/rentals/cardboxes/sm_small_mailbox_ivory.jpg"; 
pics[21] = new Image();
pics[21].src = "images/rentals/cardboxes/sm_treasure_chest_white_blue_lace.jpg"; 
pics[22] = new Image();
pics[22].src = "images/rentals/cardboxes/sm_treasure_chest_ivory_gold_lace.jpg";
pics[23] = new Image();
pics[23].src = "images/rentals/cardboxes/sm_treasure_chest_ivory_copper_lace.jpg";
pics[24] = new Image();
pics[24].src = "images/rentals/cardboxes/sm_gazebo_ivory.jpg";
pics[25] = new Image();
pics[25].src = "images/rentals/cardboxes/sm_bird_cage_silver_red_and_white_lace.jpg";
pics[26] = new Image();
pics[26].src = "images/rentals/cardboxes/sm_bird_cage_gold_white_lace.jpg";
pics[27] = new Image();
pics[27].src = "images/rentals/cardboxes/sm_bird_cage_white_dark_blue_lace.jpg";
pics[28] = new Image();
pics[28].src = "images/rentals/cardboxes/sm_bird_cage_ivory_light_blue_lace.jpg";
pics[29] = new Image();
pics[29].src = "images/rentals/cardboxes/sm_bird_cage_off_white_purple_lace.jpg";
pics[30] = new Image();
pics[30].src = "images/rentals/cardboxes/sm_tiki_hut_ivory.jpg";
}
 
function picChanger(from,to,from1,to1) {
if(document.images) {
document.images[from].src = pics[to].src;
document.images[from1].src = pics[to1].src;
}
}
 
// -->
 
</SCRIPT>

And this should go in the body:

 
<table width="100%">
<tr>
<td width="50" align="center">&nbsp;</td>
<td width="16">&nbsp;</td>
<td width="50" align="center"><A href="javascript:;" onmouseover="picChanger('img2',17,'holder',2);"><IMG id=img2 name=img2 alt="White Cake" hspace=0 src="images/rentals/cardboxes/sm_cake_white.jpg" border=0></a></td>
<td width="16">&nbsp;</td>
<td width="50" align="center"><A href="javascript:;" onmouseover="picChanger('img3',18,'holder',3);"><IMG id=img3 name=img3 alt="Off White Church" hspace=0 src="images/rentals/cardboxes/sm_church_off_white.jpg" border=0></a></td>
<td width="16">&nbsp;</td>
<td width="50" align="center"><A href="javascript:;" onmouseover="picChanger('img4',19,'holder',4);"><IMG id=img4 name=img4 alt="Ivory Mailbox (Also available in White)" hspace=0 src="images/rentals/cardboxes/sm_mailbox_ivory.jpg" border=0></a></td>
<td width="16">&nbsp;</td>
<td width="50" align="center"><A href="javascript:;" onmouseover="picChanger('img5',20,'holder',5);"><IMG id=img5 name=img5 alt="Small Ivory Mailbox" hspace=0 src="images/rentals/cardboxes/sm_small_mailbox_ivory.jpg" border=0></a></td>
<td width="16">&nbsp;</td>
<td width="50" align="center"><A href="javascript:;" onmouseover="picChanger('img6',21,'holder',6);"><IMG id=img6 name=img6 alt="White Treasure Chest with Blue Lace" hspace=0 src="images/rentals/cardboxes/sm_treasure_chest_white_blue_lace.jpg" border=0></a></td>
<td width="16">&nbsp;</td>
<td width="50" align="center"><A href="javascript:;" onmouseover="picChanger('img7',22,'holder',7);"><IMG id=img7 name=img7 alt="Ivory Treasure Chest with Gold Lace" hspace=0 src="images/rentals/cardboxes/sm_treasure_chest_ivory_gold_lace.jpg" border=0></a></td>
<td width="16">&nbsp;</td>
<td width="50" align="center"><A href="javascript:;" onmouseover="picChanger('img8',23,'holder',8);"><IMG id=img8 name=img8 alt="Ivory Treasure Chest with Copper Lace" hspace=0 src="images/rentals/cardboxes/sm_treasure_chest_ivory_copper_lace.jpg" border=0></a></td>
</tr>
</table>
<table width="100%" hspace="10">
<tr>
<td width="32">&nbsp;</td>
<td width="50" align="center"><A href="javascript:;" onmouseover="picChanger('img9',24,'holder',9);"><IMG id=img9 name=img9 alt="Ivory Gazebo" hspace=0 src="images/rentals/cardboxes/sm_gazebo_ivory.jpg" border=0></a></td>
<td width="16">&nbsp;</td>
<td width="50" align="center"><A href="javascript:;" onmouseover="picChanger('img10',25,'holder',10);"><IMG id=img10 name=img10 alt="Silver Bird Cage" hspace=0 src="images/rentals/cardboxes/sm_bird_cage_silver_red_and_white_lace.jpg" border=0></a></td>
<td width="16">&nbsp;</td>
<td width="50" align="center"><A href="javascript:;" onmouseover="picChanger('img11',26,'holder',11);"><IMG id=img11 name=img11 alt="Gold Bird Cage with White Lace" hspace=0 src="images/rentals/cardboxes/sm_bird_cage_gold_white_lace.jpg" border=0></a></td>
<td width="16">&nbsp;</td>
<td width="50" align="center"><A href="javascript:;" onmouseover="picChanger('img12',27,'holder',12);"><IMG id=img12 name=img12 alt="White Bird Cage with Dark Blue Lace" hspace=0 src="images/rentals/cardboxes/sm_bird_cage_white_dark_blue_lace.jpg" border=0></a></td>
<td width="16">&nbsp;</td>
<td width="50" align="center"><A href="javascript:;" onmouseover="picChanger('img13',28,'holder',13);"><IMG id=img13 name=img13 alt="Ivory Bird Cage with Light Blue Lace" hspace=0 src="images/rentals/cardboxes/sm_bird_cage_ivory_light_blue_lace.jpg" border=0></a></td>
<td width="16">&nbsp;</td>
<td width="50" align="center"><A href="javascript:;" onmouseover="picChanger('img14',29,'holder',14);"><IMG id=img14 name=img14 alt="Off White Bird Cage with Purple Lace Card Box" hspace=0 src="images/rentals/cardboxes/sm_bird_cage_off_white_purple_lace.jpg" border=0></a></td>
<td width="16">&nbsp;</td>
<td width="50" align="center"><A href="javascript:;" onmouseover="picChanger('img15',30,'holder',15);"><IMG id=img15 name=img15 alt="Ivory Tiki Hut with Natural Shells and Orchids" hspace=0 src="images/rentals/cardboxes/sm_tiki_hut_ivory.jpg" border=0></a></td>
<td width="32">&nbsp;</td>
</tr>
</table>
<table align="left" valign"center" >
<tr>
<td>
<IMG src="images/rentals/cardboxes/gazebo_ivory.jpg" alt="Card Box Preview" name="holder" width="320" height="320" hspace="10" vspace="10" border="0" align="middle" id="holder"> </td>
</tr>
</table>

there is a way to do it in dreamweaver.

Make your links, or put your link images on the page. Put a normal image in the target area. Where you want the "over" images to appear when you mouse over the link. Make sure you name the image in the properties. if you have a lot of images on your page it's easier to fing the image name, than go through all the other #'s to find the right image.

I give all my links "#" so they don't go anywhere if clicked.

Go into the behaviors tab, and select swap image. pick the main image, the one you named. and then select the file you want to "set source too"

This will add the swap image restore in, so your done.

I did this with a website, www.purplefishphotography.com.

DW8 does it really well and easy.

good luck!

Thank you all for your responses. The issue has been solved and I now know how to make a disjointed rollover. I'll use it in the next website I design. I first have to think what the comming website will be about

I think you need to learn to code !!! How can you build websites and NOT know how to code it ?? Learn to code HTML BY HAND in Notepad, your sites will be much better for it !

Originally Posted by LadynRed

I think you need to learn to code !!! How can you build websites and NOT know how to code it ?? Learn to code HTML BY HAND in Notepad, your sites will be much better for it !

This may seem a little harsh but come on at least learn HTML its simple...

Not harsh, but to the point.