•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 427,850 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,738 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 695 | Replies: 2
 |
| |
•
•
Join Date: Oct 2005
Posts: 236
Reputation: 
Rep Power: 4
Solved Threads: 5
Posting Whiz in Training
Im trying to creat an Imagemap Menu using my banner. This is a proto-type for a much more complex imagemap menu.
I have created an imagemap of the original banner (click the eye) and used an image swap
script to swap to my 'menu banner' (which will have more clickable areas, some leading to further maps by way of image swap).
My problem is , the areas of the menu map that will lead to other imagemap menus, how do I add to the swap code to effect that?
how do I get the icons on the menu map clickable? EG
On the black menu map (banner), the first two icons will link direct to specific pages, clicking the third icon will swap the image to another similar black menu banner, also containing clickable icons to specific pages. and so on.
Heres what I have so Far (you can test in a testbed here http://www.jmarshall.com/easy/html/testbed.html )
The Imagemap/s
I have created an imagemap of the original banner (click the eye) and used an image swap
script to swap to my 'menu banner' (which will have more clickable areas, some leading to further maps by way of image swap).
My problem is , the areas of the menu map that will lead to other imagemap menus, how do I add to the swap code to effect that?
how do I get the icons on the menu map clickable? EG
On the black menu map (banner), the first two icons will link direct to specific pages, clicking the third icon will swap the image to another similar black menu banner, also containing clickable icons to specific pages. and so on.
Heres what I have so Far (you can test in a testbed here http://www.jmarshall.com/easy/html/testbed.html )
<SCRIPT LANGUAGE=JavaScript>
intImage = 2;
function swapImage() {
switch (intImage) {
case 1:
IMG1.src = "http://i14.photobucket.com/albums/a345/Instar/part1.jpg"
intImage = 2
return(false);
case 2:
IMG1.src = "http://i14.photobucket.com/albums/a345/Instar/Avatars/menu.jpg"
intImage = 1
return(false);
}
}
</SCRIPT>
The Imagemap/s
<img src ="http://i14.photobucket.com/albums/a345/Instar/part1.jpg" width ="741" height ="70" alt="banner" usemap ="#planetmap" onclick="swapImage();" /><map id ="planetmap" name="planetmap"> <area shape ="rect" coords ="60,10,150,200" href ="http://i14.photobucket.com/albums/a345/Instar/Avatars/menu.jpg" width ="741" height ="70" </map>
Last edited by Inny : Mar 29th, 2008 at 12:48 am.
Always carry a flagon of whiskey in case of snakebite and furthermore always carry a small snake.
W. C. Fields
W. C. Fields
•
•
Join Date: Oct 2005
Posts: 236
Reputation:
Rep Power: 4
Solved Threads: 5
Posting Whiz in Training
Actually I dont think that will work right because onClick will change the page to show the next black banner menu.
thats no good, it'll need to be swap onMouseover I think.
Not sure how to store an image .eg. the second banner, or any consequent banners as you navigate the menu?
thats no good, it'll need to be swap onMouseover I think.
Not sure how to store an image .eg. the second banner, or any consequent banners as you navigate the menu?
Always carry a flagon of whiskey in case of snakebite and furthermore always carry a small snake.
W. C. Fields
W. C. Fields
•
•
Join Date: Oct 2005
Posts: 236
Reputation:
Rep Power: 4
Solved Threads: 5
Posting Whiz in Training
I decided to go simpler by using a tooltip mouseover on each clickable area of the second (black) banner.
but how to i assign c0-0rdinates for image map areas to click on the second (black) banner?
but how to i assign c0-0rdinates for image map areas to click on the second (black) banner?
<body>
<SCRIPT LANGUAGE=JavaScript>
intImage = 2;
function swapImage() {
switch (intImage) {
case 1:
IMG1.src = "http://i14.photobucket.com/albums/a345/Instar/part1.jpg"
intImage = 2
return(false);
case 2:
IMG1.src = "http://i14.photobucket.com/albums/a345/Instar/Avatars/menu.jpg"
intImage = 1
return(false);
}
}
</SCRIPT>
<script src="http://h1.ripway.com/Inny/wz_tooltip.js "></script>
<img src ="http://i14.photobucket.com/albums/a345/Instar/part1.jpg"
width ="741" height ="70"
usemap ="#planetmap" onmouseover="swapImage();" onmouseover="Tip('Some text that explains this linky poo', BGCOLOR, 'yellow')"
onmouseout="UnTip()" /><map id ="planetmap"
name="planetmap">
<area shape ="rect" coords ="60,10,150,200"
href ="http://i14.photobucket.com/albums/a345/Instar/Avatars/menu.jpg" width ="741" height ="70" />
</map>
</body>
Always carry a flagon of whiskey in case of snakebite and furthermore always carry a small snake.
W. C. Fields
W. C. Fields
|
•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Hybrid Mode
Similar Threads
- This Should be Easy for You Guys! (Linux Servers and Apache)
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: Insert a script with javascript?
- Next Thread: drop down list
