PDA

View Full Version : imagemap, rollover, replace image bleh

Evoir
07-08-2003, 05:27 PM
Do you know how to set up an image map that changes out a different image on the page? I would think there would be something out there that does this.... an example of what I want to do here:

http://dev.lizkinder.com/stoneware/

Click on the images at bottom. I'd like it when you click, it just swaps the image above. All sized the same. I might also like to see what it looks/feels like instead -- when you hover the bottom images, the top image replaces. (instead of clicking)

(the link is just an example, and the site is NOT finished. If you see other oddities in other areas of the site, it is because it is not done yet. :) )

Although, I have coded it all in html (and images!) but think I could just get away with 1 html file with some sorta image swap javascript. What do you think?

If you can 'splain it a bit to me... I'd surely appreciate it.

I think there are behavoirs for DreamweaverMX but I am not sure what it would be called.
Evoir
07-08-2003, 05:55 PM
oh, and I am open to trying it some other way, except not frames. But if there is some other way to approach this, lemme know.

:)
Evoir
07-08-2003, 07:56 PM
happily chattin with myself :) I was able to figure it out in DreamweaverMX. Basically, I used the swap image with no restore. I set the source image as one different than the one that is the image map. Curious, does the page now take forever to load for folks on dialup? How long of a delay do you have to be able to hover over one of the small images? Is it counter-productive as a user experience? (ie: too slow)

Thanks!
Wassercrats
07-08-2003, 08:53 PM
I think there was about a three second delay on dialup, but now they are all cached, so I can't time it. When they change on hovering, you could accidently move the mouse over it, and three seconds later, a new image would appear. That's a bit sloppy. Requiring a click might be better, as long as you tell people that they could click the images for a close up.
Evoir
07-08-2003, 09:05 PM
Thanks. Ok, I switched it to clicking. I would liek to not put any directions there, but I may end up putting in a line about clicking on the images. At first I did not want to do it this way (clicking) because it requires more from the end user, rather than just running their mouse over the image. hrmmm. I guess if they were smaller images.... How's it now that there is a click involved?
Wassercrats
07-08-2003, 09:12 PM
I guess if you have instructions that say to hover over them for a close up, people could avoid that if they don't want the close up to appear, which would make the hovering method less sloppy, but the click method is good. Maybe the alt info should say that you could click for a close up.
Harley
07-08-2003, 11:10 PM
Hi Evie!

IMHO, I think your initial instincts were right - a rollover seems more intuitive than a click. Just my 2 cents, though. :)

How long of a delay do you have to be able to hover over one of the small images?

(When I looked at the above page) those big images weren't being preloaded, therefore when you mouse over / click each small image for the first time, there will be a delay as it downloads (or you'll see the image progressively download in some browsers).

If you set those big images to preload, then they will display instantaneously when they are initially moused over / clicked (after the page is finished downloading, of course).

The rollover images for the navigation buttons on the left are set to preload. You can set your big images to preload by adding this to the appropriate place near the end of the <body> tag:

'/images/stoneware_straightcup_3951.jpg',
'/images/stoneware_strip_cereal_3951.jpg',
'/images/stoneware_teapot_3953.jpg',
'/images/stoneware_waveybowl_3951.jpg',
'/images/stoneware_main_3947.jpg'


(Or you can select the image in Dreamweaver, go through the appropriate behaviors' dialogue boxes and check the "preload images" checkbox.)


Curious, does the page now take forever to load for folks on dialup?

If you don't preload those big images, then no, it won't take any longer. If you do, then yes, it will take however much longer it takes to download 744k (the combined sizes of those images).

BTW, those images' filesizes are huge - but I'm sure you're aware of that.
:)

Harley
Wassercrats
07-09-2003, 12:36 AM
I suggest keeping the images high quality, which means large file sizes, since they are artistic products that are for sale. Preloading them will take a long time on dialup, and many people would notice the delay by looking at the status bar, even if the page looks complete. Personally, I'd rather wait a few seconds longer for an image to load once it's requested than see a page that takes 10 times longer than the average webpage to fully load.
Randall
07-10-2003, 07:14 AM
Stuck with a dial-up connection this week myself, I find the click/no-preload combination reasonable. Rollovers wouldn't make any sense without preloading, and this way I can go straight to the one on the right without waiting for the other four to load first.

Randall
Evoir
07-14-2003, 09:48 PM
Hey all. I am sooo close to launching this site. I wanted to say thank you for all your help and feedback. If you see anything that really needs attention, let me know. Probably will launch this in the next day or two.

http://dev.lizkinder.com

laters!
Evie
Randall
07-15-2003, 12:26 AM
I love the colors on those lampshades. :vday2:

I'm seeing some "ghost edges" on a few of the images: Striped Cereal Bowl Thick and Thin Swirls on a Serving Bowl Striped Rim Wide-Rimmed Soup Bowl (thumbnail only) I can tell that your masking got a lot better as you went on. Quickly running a fuzzy white brush around the frame edges of the aforementioned photos should solve the problem.

You've got big thick borders around the "Striped," "Frilly White," "Red Clay" and "Lamps" headings, but I'm sure you've noticed that already... Also, the navbar says "Striped Rim," not just "Striped."

On the "About" page: Periods missing (punctuation marks, I mean) from 1969 and '97. Latter also needs a paragraph break. Great story. :)

Oh, and I love the direction you've taken with your own site recently. ;)

Randall

# Yes, I really do look for punctuation marks.
frankc
07-15-2003, 12:29 PM
Evie, I gotta say the site looks terrific--let 'er rip!

And as Randall says, your new site design is most excellent, too. Well done! :agree:
Evoir
07-16-2003, 08:09 PM
After all that work on the main images, I decided to not use the masked versions. I think becasue it was exhausting, because they were uneven in skill level (I got better as it went on) and I didn't want to go back and do them, and overall, it looked really artificial to me. Not sure how to explain it, but somehow I feel calmer seeing the images the way they are now. hrmm. I donno why exactly. I do however, truely appreciate you all checking it out for me. Very nice of everyone. Randall, thanks for the punctuation stuff, always helpful. I never know how much to edit my clients text... but I think you are right. (I've done things like this in the past and been asked to change it back.)

Client is super happy. That's good. I learned new skills. :)
http://dev.lizkinder.com

glad you like the design on own my site . It is in progress.

Thanks again!
Evie
Randall
07-16-2003, 11:58 PM
Originally posted by Evoir:
Not sure how to explain it, but somehow I feel calmer seeing the images the way they are now. I have to agree. It was the ambiguous nature of the first few images that started me on this whole masking discussion -- the backgrounds weren't strong enough to separate fully from the page, but they weren't weak enough to blend in.

Sorry if my nitpicking made you go through a lot of unnecessary work. :(

Randall
Evoir
07-20-2003, 12:38 PM
Heya,

I'm still having some trouble, this time of a more techincal nature. I am wondering if I am calling the javascript properly. It is not working to click on the images in Netscape 4.7, and it does bum me out. :( It seems to work in other browsers the way it is.

Example: http://www.lizkinder.com/blackmountain.shtml

<img src="/images/blk_smalls.jpg" name="smalls" width="600" height="100" border="0" usemap="#smalls" id="smalls">
<map name="smalls">
<area shape="rect" coords="483,12,607,100" alt="Click for bigger image." href="#" onClick="MM_swapImage('blk_main','','/images/blk_butter_3919.jpg',1)">
<area shape="rect" coords="239,10,307,97" alt="Click for bigger image." href="#" onClick="MM_swapImage('blk_main','','/images/blk_candle_3921.jpg',1)">
<area shape="rect" coords="-1,11,91,94" alt="Click for bigger image." href="#" onClick="MM_swapImage('blk_main','','/images/blk_dinnerplate_3983.jpg',1)">
</map>

(edited to fix mistake in dinerplate)
Is there supposed to be something else besides a # in the href? what would I put there?

Thanks again and again!
Evie