kvarnerexpress
Jan 23 2006, 03:50 PM
| | 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?
|
Reply
sxyloverboy
Jan 23 2006, 04:10 PM
hm well what method are you using right now to change it. can you show us your code? or link your page?
Reply
jlhaslip
Jan 23 2006, 05:22 PM
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?
Reply
jlhaslip
Jan 23 2006, 07:26 PM
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)
Reply
Lozbo
Jan 25 2006, 02:03 AM
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!
Reply
jlhaslip
Jan 25 2006, 05:25 PM
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/
Reply
Recent Queries:--
web background image generator dreamweaver - 2.91 hr back. (1)
-
removing usemap with javascript - 5.88 hr back. (1)
-
style background-image usemap - 11.60 hr back. (1)
-
css usemap background image - 12.86 hr back. (2)
-
usemap for table - 15.12 hr back. (2)
-
javascript change table background image tutorial - 18.29 hr back. (1)
-
usemap background image - 29.49 hr back. (1)
-
how to add usemap to a background image - 32.60 hr back. (1)
-
css background image usemap - 48.11 hr back. (1)
-
image usemap dreamweaver - 49.76 hr back. (1)
-
usemap property css background image - 53.72 hr back. (1)
-
button onclick=this.class - 55.88 hr back. (1)
-
bg image changing javascript samples - 63.60 hr back. (1)
-
usemap css hover - 73.89 hr back. (1)
Similar Topics
Keywords : usemap, table, background, image, changing
- Background Question
:) (12)
Ok Background Help Please
html (4) OK so i've given up on the paint for background now how would i get it to look like this
http://img.photobucket.com/albums/v614/Dj1.../background.jpg without using paint and without it
coming out to look like this... http://img.photobucket.com/albums/v614/Dj169211/Damn.jpg like,
with just html code, not trying to use paint and do the BS any ideas?....
Help With Background Image
please? :) (6) Ok heres the scoop, i got a background that i made in paint for my website its just like 3 lines for
the nav bar, banner and other things ect. ect. now when i hosted it on a site and put in the This
is what it looks like in paint http://img.photobucket.com/albums/v614/Dj1.../background.jpg and
this is what it looks like when i put it into HTML
http://img.photobucket.com/albums/v614/Dj169211/Damn.jpg i dont want it tiled like that so is
there any way that i can change that? any ideas? :| Thanks in advance /smile.gif"
style="vertical-align:middle" emoid=":)" borde....
Background Image Picture On A Website
how do u make a pic a backround?? (3) ?email me if u know! Trap17 forum asks you to post contributes with substance. ....
Image Links
(5) Ok...another question...may sound stupid, but we're all stupid...how'd I be able to create
an image link. Uh...let me rephrase this: If I were to create an "Enter" image and wanted people to
click the image to enter to a certain page, how would I do it without some sort of the famous "Blue
Line" around it? Any help would be greatly appreciated... /unsure.gif"
style="vertical-align:middle" emoid=":unsure:" border="0" alt="unsure.gif" />....
Changing Php Classes Using Onclick
(7) Hey everyone. I am currently trying to finish my navigation bar on the left side of my website and i
am running in to some trouble with the css. I know how to change the items class when a user clicks
it using onClick = "this.class = newClass"; but i need to know have to change a different class when
a user clicks that link. AKA, how do i get the this part of a class that isnt that current one. For
instance if i have a class called subMenu and i want to change it to showSubMenu when a user clicks
a link that is of class menu how would i do this not using javascript but j....
Typing Over Image
(7) Is it possible to have a linked font over an image (not being a background image)? If so, how do I
accomplish that?....
Need Help With Image Wrapping
(13) ok my problem now is that i need it to auto width the image that needs to be use so then I can use
tags for the content without the need for the image to expand from left to right. heres the css for
the image wrap CODE <style type="text/css"> span { background-image:
url(images/gfxtrap_42.gif); background-repeat: repeat-y;
background-position: top left, bottom right; height: 200px; border: 0px; }
</style> heres the rest of the website code. CODE <!DOCTYPE html PUBLIC
"....
Image Roll Over Drop Down Menu Help
(2) Ok I been searching for days now on a half way descent tutorial on how to do a Image Roll Over Drop
Down Menu in CSS without the use of javascript, I been seeing alot of the suckerfish set up but of
course no one goes in to detail on how to set up the image rollover version of it. Plus I don't
want the dhtml or the javascript setup just good ole pure css. Also I need ot be able to control
multiple menus in one script as well. CODE <!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict....
Getting An Image To Scroll On With Content
(13) ok, well i had had people review Hogwartsmagic.net and they said that i should get it to not be one
huge image as a layout..and i have figured most of it out and it has proven sucessful! but now i
am having diffuclty, i am pretty much only a basicl HTML kinda person... and i was wondering if
anyone knows an html code that will allow one image to scroll the entire length of a pages content?
for example, if i were to add 200 links to the right navigation..the image would go with the
content.. i am testing it out here HERE any help would be much appreciated....
Ie5 Mac Does Not See My Site
It shows the body bg image only... (11) Remember that site layout I was hacking down for IE? Which by the way I didnt really like, but it
was the customer's design... and yes, he is not a graphic designer hehe... Anyway I was really
surprised that I got to the solution and fixed it... but as I'm testing between browsers, I come
to see that Internet Explorer in Mac does not show nothing of my page, yet the source code is there,
if you click command + e in order to see the html source code, its all there! But all I can see
from the page itself is the body background-image... I tried removing the d....
Image Doesn't Load
(6) Hi, Never hapened to me since HTML was invented. I've got a webpage ( h.shtml - I've also
tryed .htm, .html ) with the following code: Code: CODE <html> <head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0"> <meta
name="ProgId" content="FrontPage.Editor.Document"> <meta
http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Horoscope</title> </head> <body> <div
align="center"> <cente....
Fixed Background Image
Just little reminder (10) Easy teahnic, post the following codes between and QUOTE <!--
body{background-image: url( under.gif ); background-repeat:no-repeat; background-attachment :
fixed; background-position: 10% 20% ;} --> For red colour, change it to your
image's location. For green colour, it is used to set horizontal and vertical position of
background image. I hope it can help you. /tongue.gif' border='0' style='vertical-align:middle'
alt='tongue.gif' /> ....
Image.index.html
(10) hello there well i designed this image that includes text a logo i shall say i am aware that i need
to title it index.html when i upload the file i visit my website and it shows the file folder. now i
only want that image i designed on there so when clients visit my site it only goes to that page the
rest of my site isent done yet. i want it to be just like the sites you visit and it states
underconstruction. programs ive tried: indesign, image ready, incopy cs2, dreamweaver. and i
still dont understand please help meeh thanks oh and what classify's images html,....
Background Resize
(4) Does anyone have the javascript for a background to resize? I want my background to resize to
1024x768 if the visitor has resolution 1024x768, to 800x600 if the resolution is 800x600 etc.
Greets, ExplosioN /smile.gif' border='0' style='vertical-align:middle' alt='smile.gif' /> ....
Substitute Form Button For An Image
homemade images in forms buttons (3) Hi, I have the next formular : CODE <form method='post'
action='index.php?mode=2&id=1'> <input type='hidden'
name='name' value='Canon Digital Ixus 700'/> <input
type='hidden' name='id' value='1'/> <input
type='hidden' name='qty' value='1'> <input
type='hidden' name='cost' value='40'> <input
type='submit' value='Add to ca....
Background Fit Any Resolution
hmmm (6) Is it possible to do with html. I have found a few solutions but they dont seem to work. I know it
is possible in java. But anyone have the code for html? Would really appreciate it.....
Background Not Big Enough
(4) Hi: Ok, first off....moderaters, please move this topic to the appropriate category. I really
couldn't find a spot to put this in...so I just picked one. Here is the page I have a question
about: http://histology-world.com/articles/article9.htm The problem? Scroll down and you can
see. My background image is not long enough. I have gone into my photo editor and readjusted it,
just made the canvas size larger. But then I am starting to get concerned about file size. I want
the lights at the top. When the background image repeats itself, the lights are ins....
Changing The Color Of Scrollbars
to those who still don't know how (10) Place this code after the first body tag or after the title tag <!-- body{
scrollbar-face-color: #9CCF00; scrollbar-shadow-color: #687888; scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #687888; scrollbar-darkshadow-color: #DCE0E2; scrollbar-track-color:
#BCBFC0; scrollbar-arrow-color: #000000; } --> this will have a green color. You may change
the hex values to match the colors of your web pages. this works with Internet Explorer but not on
Mozilla. I haven't tried it with netscape, though. /smile.gif' border='0' st....
Simple Smil Question About Image Positioning
(3) Howdy all, I'm working on a project for college but ran into a "little" problem with SMIL,
concerning positioning images. You can see the smil presentation here:
http://www.ket.trap17.com/smil-show/index.html (its only a 15 second presentation and doesn't
take long to load. don't mind the language on the left image, its portuguese) What i want to
do, is to make the image on the right, to fade in in the same place as the left image. I tried
setting a region but that didn't work, I tried using the layout tags in the but that also
didn't work (o....
Looking for usemap, table, background, image, changing
|
|
Searching Video's for usemap, table, background, image, changing
|
advertisement
|
|
Jul 23, 2008
