SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    Dorm Room Biz proGFX's Avatar
    Join Date
    Dec 2002
    Location
    USA
    Posts
    364
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multiple Rollover Tutorial...explained inside

    Hey all...

    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!

    Chris
    proGFX
    Attached Images Attached Images

  2. #2
    . Ruchir's Avatar
    Join Date
    Feb 2002
    Location
    Sydney
    Posts
    1,863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this is quite easy actually, and can be done simply by attaching a Javascript >
    onMouseover=fn(); where fn can be degined as img src="" whatever img ... i guess u r in the wrong section for what u want

    -ruchir
    Peace.

  3. #3
    Dorm Room Biz proGFX's Avatar
    Join Date
    Dec 2002
    Location
    USA
    Posts
    364
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    confused

    Quote Originally Posted by Ruchir
    this is quite easy actually, and can be done simply by attaching a Javascript >
    onMouseover=fn(); where fn can be degined as img src="" whatever img ... i guess u r in the wrong section for what u want

    -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.

    Chris
    proGFX

  4. #4
    Fine Tuned silver trophy KC's Avatar
    Join Date
    Sep 2001
    Posts
    2,291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    Fine Tuned silver trophy KC's Avatar
    Join Date
    Sep 2001
    Posts
    2,291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You might also try Itec's list of Tutorial Websites

  6. #6
    Dorm Room Biz proGFX's Avatar
    Join Date
    Dec 2002
    Location
    USA
    Posts
    364
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    URally,

    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.

    Chris
    proGFX

  7. #7
    Fine Tuned silver trophy KC's Avatar
    Join Date
    Sep 2001
    Posts
    2,291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I will try my best to get it posted tomorrow.

  8. #8
    . Ruchir's Avatar
    Join Date
    Feb 2002
    Location
    Sydney
    Posts
    1,863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    proGFX, this is a graphic tutorial section,....and the script about what u r asking is a Javascript,..... which since i wasn't clear can be seen here > http://www.dynamicdrive.com/dynamicindex15/domroll.htm

    if u still don't understand that,.. just post ur Q in the javascript section,... and u'll know what script u want...
    i hope u find what u are looking for, its a simple Mouse Rollerover script...

    -ruchir
    Peace.

  9. #9
    Dorm Room Biz proGFX's Avatar
    Join Date
    Dec 2002
    Location
    USA
    Posts
    364
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    URAlly, thanks.

    Ruchir,

    Its not javascript and thats not what I am looking for, what you showed is just a regular mouseover. It can all be done in HTML and thats what I am looking for.

    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.

    Chris
    proGFX

  10. #10
    + platinum's Avatar
    Join Date
    Jun 2001
    Location
    Adelaide, Australia
    Posts
    6,441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's a javascript question - there's no way it can be done with only HTML

    I just grabbed a simple rollover script from www.hotscripts.com and modded it a bit... shouldn'tbe too hard to work out.

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
      <head>
      <title>Image Rollover</title>
    
    <script language="javascript">
    <!-- This script works in: Navigator 3 - 4, Opera 3.1, and Explorer 4
      //  Script:       Image Rollover
      //  Version:      1.0
      //  Last Updated: June 12th 1998
      //  Author:       Scott Brady
      //  Org:          HotSource HTML Help
      //  Email:        [email]webmaster@sbrady.com[/email]
      //  Website:      [url]http://www.sbrady.com/hotsource/[/url]
    
    if (document.images) {
    teston = new Image();		// Active images
    test2on = new Image();
    teston.src = "orange.gif";
    test2on.src = "orange.gif";
    
    testoff = new Image();		// Inactive images
    test2off = new Image();
    testoff.src = "blue.gif";
    test2off.src = "blue.gif";
    }
    
    function imgOn(imgName) {
    
    if (document.images) {
    document[imgName].src = eval(imgName + "on.src");
    }
    }
    
    function imgOff(imgName) {
    if (document.images) {
    document[imgName].src = eval(imgName + "off.src");
    }
    }
    
    // -->
    </script>
    
      </head>
    <body>
    
    <div align="center">
    <a href="#" onMouseOver="imgOn('test')" onMouseOut="imgOff('test')"><img src="blue.gif" border="0"></a>
    <a href="#" onMouseOver="imgOn('test2')" onMouseOut="imgOff('test2')"><img src="blue.gif" border="0"></a>
    <br />
    <img src="blue.gif" name="test">
    <img src="blue.gif" name="test2">
    </div>
    
    </body>
    </html>

  11. #11
    Fine Tuned silver trophy KC's Avatar
    Join Date
    Sep 2001
    Posts
    2,291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Chris,

    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.

  12. #12
    Fine Tuned silver trophy KC's Avatar
    Join Date
    Sep 2001
    Posts
    2,291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the example.

    I used the Layers and Behavior panels in Dreamweaver to create the javascript.

    Here's how:

    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.

  13. #13
    Dorm Room Biz proGFX's Avatar
    Join Date
    Dec 2002
    Location
    USA
    Posts
    364
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    URAlly,

    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.

    Chris
    proGFX

  14. #14
    Fine Tuned silver trophy KC's Avatar
    Join Date
    Sep 2001
    Posts
    2,291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Edit:

    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.

  15. #15
    Dorm Room Biz proGFX's Avatar
    Join Date
    Dec 2002
    Location
    USA
    Posts
    364
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    URAlly,

    Do you have any type of instant messanger? Please get in contact with me via AIM at bigpund2k2 if you can. thanks

    Chris
    proGFX

  16. #16
    Fine Tuned silver trophy KC's Avatar
    Join Date
    Sep 2001
    Posts
    2,291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  17. #17
    Fine Tuned silver trophy KC's Avatar
    Join Date
    Sep 2001
    Posts
    2,291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    okay I will ping you.

  18. #18
    Dorm Room Biz proGFX's Avatar
    Join Date
    Dec 2002
    Location
    USA
    Posts
    364
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Thanks

    Chris
    proGFX


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •