Results 1 to 18 of 18
Jun 16, 2003, 18:28 #1
Multiple Rollover Tutorial...explained inside
I am in search of a tutorial that allows you to do rollovers in different locations. I am attaching a file to help explain this better.
First, I have a row of 4 different images next to each other (the black 1, 2, 3, and 4). And when you mouseover the number 1 image, I want the 1A image to appear above it. then when you mouseover the number 2 image, i want the 2A image to appear above it and so on with all the 4 image blocks.
What I am doing is taking a picture of a band and splitting it between the 4 different members. Then when you mouseover each member, I want the instrument that they play to appear above there head. Then when you actually click on the image of the person, the link will take you to a short bio page on that person.
Anyone know of a site that has a tutorial like this? I know I have seen them before, just dont remember where. I think it might have been on neofrog.com but thats been down for a while and I thought b-man.dk had one but thats down too until the next version is up, so i turn to you guys for help.
Thanks for all help you can give!
Jun 17, 2003, 01:53 #2
onMouseover=fn(); where fn can be degined as img src="" whatever img ... i guess u r in the wrong section for what u want
Jun 17, 2003, 03:09 #3
confusedOriginally Posted by Ruchir
hrmmm....did that not help anyone else? That didnt quite make sense to me. And how would I be in the wrong forum when I am looking for a tutorial...this is the tutorial section.
Jun 17, 2003, 07:04 #4
Chris, are you using Dreamweaver or Fireworks? If so, I'm working on a tut for this now (using DW and FW), but will be a couple more days before I post it.
[Edit] I believe this forum is strictly for posting tutorials but if you have a question about how to do something, it should be posted under Graphics and Multimedia instead of Graphic Tutorials and Methods. At least this is how it was explained to me.
Jun 17, 2003, 07:09 #5
Jun 17, 2003, 13:21 #6
I am using dreamweaver. Any help you could offer would be great with your tutorial. I need it by thursday if you think you might be done by then. And I will also check out the list of tutorial sites.
Jun 17, 2003, 16:40 #7
I will try my best to get it posted tomorrow.
Jun 18, 2003, 00:02 #8
i hope u find what u are looking for, its a simple Mouse Rollerover script...
Jun 18, 2003, 03:19 #9
I would have posted this in the general tutorial section, but there isnt one so I figured this to be my best bet.
I am not looking for a simple mouseover in one spot like the link you supplied, if you refer back to the image i posted in the beginning, then you will notice that i want it so when you mouseover the *black 1* the *red 1A* will apear above it while the image where the *black 1* is located will stay there.
Jun 18, 2003, 03:51 #10
- Join Date
- Jun 2001
- Adelaide, Australia
- 0 Post(s)
- 0 Thread(s)
I just grabbed a simple rollover script from www.hotscripts.com and modded it a bit... shouldn'tbe too hard to work out.
Jun 18, 2003, 05:45 #11
I have an example for you and will post shortly with an explanation of what I did using Dreamweaver. If I understand you correctly, you are wanting to use DW's built in js functionality.
Jun 18, 2003, 06:20 #12
Here is the example.
Under the Windows drop-down menu, open up the Layers Control panel and the Behaviors control panel.
Create three layers (let DW create the names for you. You can changed them later).
Hide Layers 2 and 3 in the Layers control panel by clicking on the eye icon next to each layer in the Layers control panel. Make sure Layer1 is visible.
Insert your main image into Layer1. Next, click on the + sign in the Behaviors drop-down menu, and click on show-hide layers. A pop-up selection menu will appear with all three layers in the box. Select "show" Layer1 and your mouse-over function will be for Layer 2 so select "show" Layer2. Select to "hide" Layer3.
Next, Click on Layer2. Insert your second image into Layer2. Click on the + sign in the Behaviors menu again, and select Show-Hide layers. This time select "show" all Layers.
Next, click on Layer3 in the Layers control panel. In the properties panel, click on the folder icon next to the URL window and browse for the document you want Layer 3 to link to. You don't need a Layers event for Layer3 if you want it to redirect to a url only.
Press F12 to view the page in your browser.
Hopefully this will give you an idea of how to work with behaviors and you can change your functionality to best suit your needs.
Jun 18, 2003, 11:07 #13
that actually is just about what I was looking for, only I dont want the image to stay above the other image when mousedover and then have to mouseover another image for it to go away.
im looking for it to be exactly like a regular mouseover, just to have the image appear above it when mousedover and disappear when the cursor is moved.
Any ideas? Thanks for the help. I will play around with what you stated above and see if I can get something.
Jun 18, 2003, 12:41 #14
Oh okay. Then all you have to do is overlay the layers (in other words, move the layers on top of each other). The functions will still work accordingly following my instructions. I know you stated you need this done by tomorrow so I will try to help as much as possible until then only my family time starts in about 1 1/2 hours. But I will be available in the morning.
Try the above example again. All I did was move Layer2 over Layer1. I didn't change the code.
Last edited by URAlly; Jun 18, 2003 at 12:57.
Jun 18, 2003, 12:57 #15
Do you have any type of instant messanger? Please get in contact with me via AIM at bigpund2k2 if you can. thanks
Jun 18, 2003, 12:58 #16
Layer3 had the url link so if you click on it (might be confusing for the examle) it links back to index.html which shows the orange square.
Jun 18, 2003, 12:59 #17
okay I will ping you.
Jun 19, 2003, 12:08 #18
URAlly, you have been a help, but I wasnt able to figure it out last night. If you get on AIM, drop me a message- bigpund2k2.