pablo scapi Posted October 6, 2003 Share Posted October 6, 2003 Hello, i know this is not a especific forum for these kind of question but i know there is somone that can answer me and in the other hand all the forums i´ve seen for web develop are not very good, (all right, the true is that i love this forum and the people on it :winkgrin: ) The issue: I´m starting to build my web, and i want to have my main page with a photo; in that photo there will be an area (map) that will be a link to the second page. I can do the map thing and the link, but what i want is that when the mouse is over that area, a new photo appears in it´s place, and if you move away then the previus photo return. Now i need to know the way this could be achieved, i´m not asking for a step by step explanation but just to point me the right way to serch for turorials and program help; like the neme of the method etc. (also if you know tuts on that area ) BTW. i´m using the Studio MX, so i´m basically tring with dreamweaver but i could use flash for instance (if that´s the only way) Thanks in advance. Pablo Scapinachis Link to comment Share on other sites More sharing options...
Josh1587140445 Posted October 6, 2003 Share Posted October 6, 2003 basicly what you are looking for for is a javascript function called either a "mouseover" or a "rollover" It is a relatively simple code. I just usually copy past the code. Link to comment Share on other sites More sharing options...
Crazy Homeless Guy Posted October 6, 2003 Share Posted October 6, 2003 click 'insert' on the menu bar, and scroll down to 'interactive images'. Link to comment Share on other sites More sharing options...
mbr Posted October 6, 2003 Share Posted October 6, 2003 Dreamweaver: Insert > select the image you want to see first > go to the Behaviors menu on the right, select Swap Image > select the image you want to see on the mouseover > type the URL in the Properties Menu on the bottom and the target (your window, new window, frame, iframe, etc.) Flash: Insert > Insert New Symbol > Select Button > you will get a screen that has UP, OVER, DOWN, HIT > hit F6 to put a key frame in each one and make the shapes you want to be seen on each button state > hit CTRL + L to get the Library menu open, drag button to stage > add the appropriate actionscript to have it open, move, etc. Honestly, though, you really need to go through several tutorials if you are not familiar with this. It takes more to make a website than a button, too. You have to understand what that button is going to do, what it controls, etc. Feel free to look at the code on my site, which is fairly straight forward html, javascript, iframes, and a little css. I'd suggest getting a few good books. Lynda Weinman's HOT series are a good start, but there are hundreds of others. Link to comment Share on other sites More sharing options...
tcorbett Posted October 6, 2003 Share Posted October 6, 2003 Although they've dropped off in frequency and quality, there are still a lot of good web tutorials over at Webmonkey - http://www.webmonkey.com They also have a code library available for use. Link to comment Share on other sites More sharing options...
mbr Posted October 6, 2003 Share Posted October 6, 2003 Yes, they are a great resource. I believe that's where I got the js for controlling multiple iframes. Link to comment Share on other sites More sharing options...
Jeff Mottle Posted October 6, 2003 Share Posted October 6, 2003 Here's an easier way. 1. Insert your image 2. Select your image 3. In the properties tab for that image look at the lower left. You will see three light blue icons (square, circle, and polygon) click one, depending what you want to do, and drag over your image to highlight the area you want to be a hotspot. 4. Select the new hotspot(s) and from it's properties dialog enter in the link, target and Alt text. 5. you're done. Link to comment Share on other sites More sharing options...
mbr Posted October 6, 2003 Share Posted October 6, 2003 Jeff, But that doesn't allow for a rollover, correct? Just a hotspot? Link to comment Share on other sites More sharing options...
xgarcia Posted October 6, 2003 Share Posted October 6, 2003 Best thing to do is slice it up in image ready and make "cell" that needs to be a rollover. OR you could use flash...I have no clue how to do flash. Link to comment Share on other sites More sharing options...
pablo scapi Posted October 6, 2003 Author Share Posted October 6, 2003 Thank you all for the fast replies; but (and there´s allways a but) What you sugest is good to make the hole image as the link, while what i want is more like jeff explained, a map area. That i have allready done it, but what i can´t do is the mix of bouth. I´l try to explain better. i want the hot spot on an image and in the same time that when the cursor is over that hot spot the image changes, and of course when you click a new page displays. i´m attaching an image just to meke it a more graphic. The first one have the sphere as the hot spot, and i wan that when the mouse goes over the sphere, an image like the second one will replace it,(like but not that one, is just for explanation) with a hot spot in the shere too, so if you go away from there the firs image returns I hope i made myself clear or at least understable. Pablo Link to comment Share on other sites More sharing options...
mbr Posted October 6, 2003 Share Posted October 6, 2003 Yes, that's what I was explaining. But you need to do what Xavier mentioned - slice the image up. If you want the image to change, you can't use a hotspot (as Jeff suggested - the most straight forward way to make a link). This requires cutting/slicing the image up in Fireworks or Imageready, and putting in a table in Dreamweaver (this is how my site was made). Then you select the area that is cut where you want the rollover and use the Behavior > Swap Image to make a rollover. It's all very simple, but you have to have some idea what you are doing. You really should go through the tutorials and/or buy a book. I would really caution you about attempting all this without going through some tutorials and understanding the basics. You'll inevitable run into problems, and you will most likely have dug a deep hole that would be difficult to back track out of. Keep it as simple as possible. Read up on the Fireworks, you shouldn't have a problem if you just use the code it generates automatically. Or, Just do what Jeff suggested and forget the rollover. Flash is easier for this, but it's a whole different set of criteria, and it will be harder in other places. Link to comment Share on other sites More sharing options...
pablo scapi Posted October 6, 2003 Author Share Posted October 6, 2003 Allright i could do it in fireworks!!! Finally i had to mix a division with the hole image in it an and interactive zone circle with over the sphere. It works swell. Pablo Thank you all Link to comment Share on other sites More sharing options...
ingo Posted October 7, 2003 Share Posted October 7, 2003 And dont forget to preload the images, otherwise it will take ages to load the rollover pict just when the mouse is above the hotspot. Link to comment Share on other sites More sharing options...
bigcahunak Posted October 7, 2003 Share Posted October 7, 2003 Originally posted by ingo: And dont forget to preload the images, otherwise it will take ages to load the rollover pict just when the mouse is above the hotspot. Ingo, or anyone else, any idea where that "preload" option is in MS frontpage? tnx. Link to comment Share on other sites More sharing options...
mbr Posted October 7, 2003 Share Posted October 7, 2003 Make sure it doesn't do it automatically (just look in the source code). Dreamweaver sticks it in automatically, but I've never used FP. Link to comment Share on other sites More sharing options...
ingo Posted October 7, 2003 Share Posted October 7, 2003 Originally posted by bigcahunak: Ingo, or anyone else, any idea where that "preload" option is in MS frontpage? tnx. Sorry no, but simply look into some webpage code in the header. I do it mostly by hand (or with Dw), so i don't know where it is in Frontpage. Link to comment Share on other sites More sharing options...
bigcahunak Posted October 7, 2003 Share Posted October 7, 2003 Originally posted by ingo: Sorry no, but simply look into some webpage code in the header. I do it mostly by hand (or with Dw), so i don't know where it is in Frontpage. In the past when I used DW (v2.0 and 3.0) it worked ok. Dont know why, but I just cant figure it in FP, no matter how much I search the code. I will though TNX. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now