DISJOINTED ROLLOVERS 2

[racebeetlestone]

Hi... I'm trying to do a disjointed rollover. I want to roll over an image and trigger a different image in another area of my page. How do I do that?? I'm using the SWAPIMAGE function but the image just opens in place of the rolled-over image, not in another location. PLEASE HELP! I've tried a couple different tutorials and they don't describe clearly how to do this.

 

[Cheech]

Try looking at show/hide layers

[Peace][Pipe]

 

[deecee]

first you have to name all your images --

then when you go to the swap image behavior you need to find the name of the image you want swapped --- then just chose the image you want to swap it with and its that simple.

Listen All I ask is that You close out a Post You Started!!!!

 

[lebisol]

there are 2 ways to do it and both of the desingers above me have told you the way:
shold u need more info:
1. ========================
by placing "disjointed image" into a hidden layer and then using a Show/Hide Layer" from behaviors on the original image that is visble 1st
relevant code:

<a href="#" onMouseOver="MM_showHideLayers('disjointed','','show')"><img src="/initial_image.jpg" name="Initial_image" width="72" height="32" border="0" id="Initial_image"></a> 
<div id="disjointed" style="position:absolute; width:299px; height:100px; z-index:1; background-color: #FF9900; layer-background-color: #FF9900; border: 1px none #000000; left: 170px; visibility: hidden;"><img src="" alt="blank" name="transparent_or_placeholder" width="270" height="40" id="transparent_or_placeholder"></div>

2. ================
based on "rollovers"
deecee has made a great point that is often overlooked......
NAME the image!
-insert image that will be visible 1st eg. "inital_image.jpg" and then NAME it in Properties...(u can call it whatever u like and does not need to be the same name as its "file_name.jpg")
- insert an "image place holder" of the same size as the "real disjointed" image u want to show -NAME IT

note: u can also use a 1x1px tranpsrent image and simply force its size to your needs -NAME IT
- then go back to your 1st inital image and while selected go to Behaviors-->Swap Image
and sawp the appropriate ( the "link over image" and also the "blank with the disjointed")
relevant code:

<a href="#" onMouseOver="MM_swapImage('transparent_or_placeholder','','real_disjointed.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="/initial_image.jpg" name="Initial_image" width="72" height="32" border="0" id="Initial_image"></a> 
<img src="" alt="blank" name="transparent_or_placeholder" width="270" height="40" id="transparent_or_placeholder">

there isn't much difference on how you do it....If you are using table based desing I would suggest you do not use techinque 1 as it might effect you overall desing if u are not used to layer based designs.
Both concets are powered by MM_builtin JavaScripts that need to be placed/generated above </head> tag.

All the best!

> need more info?
:: don't click HERE ::

 

[racebeetlestone]

Great. Thank you all for your help. I'm a complete amateur with DW so sorry if the questions seem elementary.

 

[Cheech]

If you are stuck ask away, we were all beginners

[Peace][Pipe]