Forums
This topic is locked
DreamWeaver - Pop Ups
Posted 12 Apr 2007 00:40:18
1
has voted
12 Apr 2007 00:40:18 Sean McDonough posted:
I wanted to find out a way to make a list of items change the picture that is displayed. We have a list of products on one side of the window. On the other side, we have one full image of one of the products. What I would like to do is create a rollover for each product to where when the viewer is looking at them and puts his/her mouse over one product the image on the other side will change to that product. Then, when he/she puts the mouse over another product the image will change to that product, so on and so forth. Can this be done with DreamWeaver 8.0 or do I need Fireworks to do this?Also, let's say that this is done and everything works fine, will the last image that the mouse was on stay up, even though the mouse was moved off of the text and only change if the mouse goes over the text of one of the other products?
Okay, one last thing, I also want to make a link to each of these products by using the text, not the changing images. Is that just a second thing to do or is that another addition that I'll have to deal with?
I'm still fairly new with Dreamweaver, but am working my way through it.
Thanks for any and all of ya’lls help,
mr19th
Replies
Replied 15 Apr 2007 03:16:55
15 Apr 2007 03:16:55 Kenneth Halley replied:
You can do this with behaviours in DW.
You use the change text of layer behaviour. Easy way to test this- create a plain html doc- put in two lines- link 1 and link 2 and make them into links. Don't bother with urls- in the link property just put a # symbol.
Create a layer box below- any size you like but big enough to contain the images.
Put your initial image in the layer box. (drag it in). Now copy the html - or whatever code your using, image link code from code view to this image file- i.e the like this: <img src="images/myfirstimage.jpg" width="100" height="40" />
Select the Second text link- then go to the behaviours panel- and choose the "Set text of layer option". It will prompt you for the layer id and the html code to go in the box when you hover over the second link. Paste in the copied code above substituting the image link for the image to replace the first one "mysecondimg.jpg".
OK this and make sure the behaviour event is "OnMouseOver".
Go to the first link and repeat don't bother copying the second image code- this time the copied link will show the initial image url code.
Save the page and display in browser- when you hover over link two the initial image in the layer changes and then back when you go to link 1. You can obviously expand on this to suit and fettle to your desire.
HTH
Kenny
-----------------------------------
www.halleynet.co.uk
You use the change text of layer behaviour. Easy way to test this- create a plain html doc- put in two lines- link 1 and link 2 and make them into links. Don't bother with urls- in the link property just put a # symbol.
Create a layer box below- any size you like but big enough to contain the images.
Put your initial image in the layer box. (drag it in). Now copy the html - or whatever code your using, image link code from code view to this image file- i.e the like this: <img src="images/myfirstimage.jpg" width="100" height="40" />
Select the Second text link- then go to the behaviours panel- and choose the "Set text of layer option". It will prompt you for the layer id and the html code to go in the box when you hover over the second link. Paste in the copied code above substituting the image link for the image to replace the first one "mysecondimg.jpg".
OK this and make sure the behaviour event is "OnMouseOver".
Go to the first link and repeat don't bother copying the second image code- this time the copied link will show the initial image url code.
Save the page and display in browser- when you hover over link two the initial image in the layer changes and then back when you go to link 1. You can obviously expand on this to suit and fettle to your desire.
HTH
Kenny
-----------------------------------
www.halleynet.co.uk
Replied 18 Apr 2007 09:03:35
18 Apr 2007 09:03:35 Dave Clarke replied:
another way would be to use a disjointed rollover .. take a look
www.dwfaq.com/tutorials/basics/disjointed.asp
DW8.02|ASP|VBScript|IIS5.1|Access|WinXPPro & WinXPHome.
www.reunite.co.uk
www.dogworld-uk.com
www.dwfaq.com/tutorials/basics/disjointed.asp
DW8.02|ASP|VBScript|IIS5.1|Access|WinXPPro & WinXPHome.
www.reunite.co.uk
www.dogworld-uk.com