Welcome Guest ( Log In | Register)



 
Reply to this topicStart new topic
> Usemap And Table Background Image Changing
kvarnerexpress
post Jan 23 2006, 03:50 PM
Post #1


Super Member
*********

Group: Members
Posts: 407
Joined: 13-December 04
Member No.: 2,696



I have a menu page that consists of links to other pages. The page has a background image of a globe. The globe is divided into seperate sections for each menu item. As a user hovers over each section I change the background image(The same globe with that section highlighted.)

That is what I have so far except that they have to hover over a small anchor tag that I put in not the whole section. I want to change it so that they can actually hover over all of the section they are selecting.

I found usemap online but haven't found any examples where it will actually change the background image.. only allows you to set a link for certain shapes.

Can anyone point me in the right direction?
Go to the top of the page
 
+Quote Post
sxyloverboy
post Jan 23 2006, 04:10 PM
Post #2


Super Member
*********

Group: Members
Posts: 302
Joined: 17-June 05
From: Frankfurt, Germany
Member No.: 8,358



hm well what method are you using right now to change it. can you show us your code? or link your page?
Go to the top of the page
 
+Quote Post
jlhaslip
post Jan 23 2006, 05:22 PM
Post #3


A computer once beat me at chess, but it was no match for me at kick boxing.
Group Icon

Group: [MODERATOR]
Posts: 4,085
Joined: 24-July 05
From: Linix, DOS and Windows…the good, the bad and the ugly
Member No.: 9,787
Spam Patrol



Here is one way to accomplish what you want.
The basics are to place the image on the background of the page and then when the on-hover status is determined, the image is replaced by another. This method as explained above uses new images for the on-hover replacement.
Another method described here uses a single image containing several 'pictures' and 'offsets' the image so that the "mapped" section is displayed on hover. You didn't leave us a link to look at, so we can't make a determination as to which might be best for your application. Perhaps you could leave a link for review?
Go to the top of the page
 
+Quote Post
jlhaslip
post Jan 23 2006, 07:26 PM
Post #4


A computer once beat me at chess, but it was no match for me at kick boxing.
Group Icon

Group: [MODERATOR]
Posts: 4,085
Joined: 24-July 05
From: Linix, DOS and Windows…the good, the bad and the ugly
Member No.: 9,787
Spam Patrol



Oops, sorry, upon re-reading this topic, I now realize that you have a handle on the techniques, but want to 'reshape' the hot spot for the rollover? If so, go here and check out the part about polygons. I googled on "Image mapping html shapes" to find this link. (hint)
Go to the top of the page
 
+Quote Post
Lozbo
post Jan 25 2006, 02:03 AM
Post #5


Super Member
*********

Group: Members
Posts: 282
Joined: 1-September 05
From: Wanatos
Member No.: 11,382



Im not exactly sure if I understood correctly, why dont you post a link to your site which you are developping?

What generator are you using? (dreamweaver, notepad, frontpage..) If you are using dreamweaver its very easy to achieve rollovers and to draw shapes , rectangles circles and polygons...

By the way, if some one is interested, i didnt know that the 'map' tag was xhtml strict supported, but made a quick test and it is!
Go to the top of the page
 
+Quote Post
jlhaslip
post Jan 25 2006, 05:25 PM
Post #6


A computer once beat me at chess, but it was no match for me at kick boxing.
Group Icon

Group: [MODERATOR]
Posts: 4,085
Joined: 24-July 05
From: Linix, DOS and Windows…the good, the bad and the ugly
Member No.: 9,787
Spam Patrol



I was successful in finding an Image Mapping Software which is really good. Better than anything else I have found. I did this: http://www.jlhaslip.trap17.com/mlafever/consulting.html using two "layers", the entire image and then there are about 16 other hotspots which sit on top of it. I'll add better definitions for it next. Fill in both alt and title, because ff and Opera use title= and IE uses alt=. Javascript functions are also available by defining them. Check out their sample.

The package is called geohtml, the source is: http://www.fegi.ru/geohtml/
Go to the top of the page
 
+Quote Post

Reply to this topicStart new topic

Collapse

> Similar Topics

Topics Topics
  1. Background Not Big Enough(4)
  2. Background Fit Any Resolution(6)
  3. Substitute Form Button For An Image(3)
  4. Background Resize(4)
  5. Image.index.html(10)
  6. Fixed Background Image(10)
  7. Image Doesn't Load(6)
  8. Ie5 Mac Does Not See My Site(11)
  9. Getting An Image To Scroll On With Content(13)
  10. Image Roll Over Drop Down Menu Help(2)
  11. Need Help With Image Wrapping(13)
  12. Typing Over Image(7)
  13. Changing Php Classes Using Onclick(7)
  14. Image Links(5)
  15. Background Image Picture On A Website(3)
  1. Help With Background Image(6)
  2. Ok Background Help Please(4)
  3. Background Question(12)


 



- Lo-Fi Version Time is now: 13th October 2008 - 09:29 PM