swap image using dreamweaver
Hello. This might be in the wrong place...
Look at this site: http://www.home-appraiser.com/
See how when you rollover the main nav the rollover image changes and so does the middle text image. How is that done? I have looked at the code and I must be missing it but I do not see it. (If you know how to do any of this in dreamweaver that would be helpful...)
Along with this question. What if that middle text was in a layer? Can that be done? What if it was just text and not an image?
Thanks for your help!
Brooke
jammin posted this at 22:53 — 1st November 2002.
They have: 222 posts
Joined: Sep 2002
not too familiar with dreamweaver, but it should just be a onmouseover effect, im sure you could so it in javascript.
Brooke posted this at 23:27 — 1st November 2002.
She has: 681 posts
Joined: Feb 1999
If you do two swap image events they are in the same spot basically. Somehow you have to specify that you want one image changed in image the first image's place. And another image to change somewhere else. Just like that example I stated above!
Megan posted this at 00:57 — 2nd November 2002.
She has: 11,421 posts
Joined: Jun 1999
I'm pretty sure that there is an extension you can download do this. I forget what it's actually called - double rollover or targetted rollover or something like that. If I remember I'll let you know..
Otherwise you can just trade the name of the image for the name of the target image in the javascript.
Megan
Connect with us on Facebook!
Busy posted this at 02:40 — 2nd November 2002.
He has: 6,151 posts
Joined: May 2001
If you just want the code go to my main site munchtech.com and steal it from the source code (mouseover the bottom images and the top banner changes)
Its just a simple 2 mouseover javascript instead of one, and the image being moused over doesnt change, or you can have it change if you want.
Brooke posted this at 02:41 — 2nd November 2002.
She has: 681 posts
Joined: Feb 1999
But you show mr where this exists on that one page I gave above? That way I can really understand it.
Busy posted this at 02:58 — 2nd November 2002.
He has: 6,151 posts
Joined: May 2001
I had a look at the source code on that page but its all that dreamweaver mumbo gumbo, make any grown man cry
I posted the link cause I was to lazy to type it out, I guess I'll type it out now then.
in the head section, put this:
<script type="text/javascript"> <!-- Hide from old browsers
if (document.images) {
image1on = new Image();
image1on.src = "image1.gif";
image1off = new Image();
image1off.src = "image1a.gif";
}
function changeImages() {
if (document.images) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src =
eval(changeImages.arguments[i+1]
+ ".src");
}
}
}
// end hiding --></script>
<a href="link.html" onmouseover="changeImages('image1', 'image1on')" onmouseout="changeImages
('image1', 'image1off')">
name="image1"' into the img tag of the image you want changedMegan posted this at 02:59 — 2nd November 2002.
She has: 11,421 posts
Joined: Jun 1999
They're acutally using Macromedia code on there, so they probably found that extension. I remember recommending that to another member here once so you might want to search around in the Web Authoring folder - I think it was Gadget Girl who was asking.
The mouseover code used on the page you linked looks like this:
onMouseOver="MM_swapImage('Image9','','images/rollovers/professionals_FRONTpage.gif',1)' In a normal mouseover the "Image9" bit would be the name of the image that you're mousing over. In this case, "Image9" is the name of the big center image where the text appears.Man, macromedia javascript can really get messy sometimes!
Megan
Connect with us on Facebook!
The Webmistress posted this at 09:19 — 2nd November 2002.
She has: 5,586 posts
Joined: Feb 2001
If you are using Dreamweaver:
Name your images, then click on the image for the rollover, go to Behaviours & click onto Swap Images, locate the image you want to change from the list, then browse to find the image to be shown on mouseover. If you want to change more than one image (the other image can be anywhere on the same page) by the same action locate that image in the list and browse for the swapped image.
If you want to change text but not have it as an image then I'm sure you'd have to play around with layers.
Julia - if life was meant to be easy Michael Angelo would have painted the floor....
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.