Page 1 of 1

Image Map Menu

Posted: Fri Mar 24, 2006 5:56 pm
by Dr.CSS
Tips and Tricks  OK
how about an image map menu with links generated from your pages,, you just need an image to relate it to. I hacked 1 of the bullet menus.

  :D  mark

BTW the one at the bottom of the content is a small hand coded one I only needed it to be limited to 3 things and don't know any js coding to limit the search string to look at only 1 set of pages.

Re: Image Map Menu

Posted: Wed Mar 29, 2006 7:01 am
by katon
How did you do this?  Can you post the details?

Re: Image Map Menu

Posted: Wed Mar 29, 2006 8:00 pm
by Dee
Very, very nice way to create an image flip menu indeed  :o
Willing to share, or is this one for the tricks section?

Re: Image Map Menu

Posted: Wed Mar 29, 2006 8:15 pm
by Dee
Hmm, almost forgot that's what webservers do... sharing things ;)
See it's a static image in a div with a css position flip... pretty cool. How compatible is this?

Did spot some weird typo's in your CSS BTW  ;D

/* set the size of the definition list and add the background image */
#imap {
  display:block;
  width:149px;
  height:394px;
  ackground: url(uploads/images/mainmenu.jpg) no-repeat;
  position:relative;
  }

/* the hack for IE pre IE6 */
* html #imap a#title {
  height:240px;
  he\ight:0;
  }

Re: Image Map Menu

Posted: Wed Mar 29, 2006 9:01 pm
by Dr.CSS
That's not a typo i did that because the image was not showing up, i had to put it in the color CSS as background for the box that imap is in just never cleaned it up  ;) ,,
i have no problem with sharing,, i'm using dt's, dl's, dd's, and it works cross browser, you can find a tutoriol(sp?) at http://themes.cmsmadesimple.org/Image_menu.html it uses ul, li, so it fits in with the menu system w/o the hacks that i used on the menu .js file,, i did mine before i found that ^ tut.

  HTH  mark

Re: Image Map Menu

Posted: Wed Mar 29, 2006 11:00 pm
by Dee
Thnx for the link, I'm trying it out right now. I meant the "ackground" and the "he\ight"...

Re: Image Map Menu

Posted: Wed Mar 29, 2006 11:12 pm
by Dr.CSS
ackground,,, becauce i didn't want to comment it out or delete it,,
2nd is a hack to fool IE,, i didn't do that.

  mark

Re: Image Map Menu

Posted: Wed Mar 29, 2006 11:23 pm
by Dee
hehe, /**/ too much and weird hack (IE sigh)
all clear  :D (

Re: Image Map Menu

Posted: Thu Mar 30, 2006 10:42 pm
by Dr.CSS
New one w/drop down menu Imap Menu

>:( IE break this one  >:( 
  :D HaHaHa fixt it works in IE now

  mark  8)

Re: Image Map Menu

Posted: Fri Mar 31, 2006 8:26 am
by nils73
You could also use bulletmenu and then use Image-Replacement. Haven't tried it with CMS made simple yet, but I did it for a voice-over professional website.

Regards,
Nils