Streaming live at 10am (PST)

ImageMap Possible?


#1

Apologies if this was already posted or seems a silly question.. Is it possible to use an image as an imagemap using Webflow ? I have a nav bar that's a graphic instead of text..

Thanks in advance !!


#2

Can you show an example (webflow public link or image) of what you're trying to accomplish? I'm sure it would be easy to build using absolute positioning or background images.


#3

Hi Sergie. Thanks for your followup.. I want to recreate an existing website using Webflow. Right now, the menu (which is a .png file) looks like:

Currently using "imagemap" so that you can click on each item and it links to the appropriate page in the site.. I just want to duplicate that in Webflow..

Thank you !!!


#4

Hi Mike,

I would suggest not using an image map. Especially for navigation bar. When replacing a nav item, you would need to open up photoshop or illustrator, update the nav items, export the image, then recode the imagemap HTML.

If you use live text, you can just update the text and the link and you're done. I've provided two ways to do this in the example page below.

https://webflow.com/design/spaceshipspaceship?preview=479e1b771d56b153acd35a42a31dc681
http://spaceshipspaceship.webflow.com/

let me know if you have any questions.

GL HF =)


#5

Hi PixelGeek.. Thanks for your response.. Unfortunately the owner of the website wants that "white, red outlined" text look because it fits in with the rest of the site.

I actually ran it by her using "live text" initially but... so that's why I'm pursuing something like the imagemap capability.. (BTW - I totally agree with you that live text would be MUCH easier to maintain, update, etc.. but it's not my site..)

I'm thinking I might have to split the graphic up into individual elements and use the "link block" option to make the appropriate links work..

Yep - A little more work for me, I guess...

Thank you again !!!


#6

if thats the case.

1) i'm sorry about the type of client you have
2) you can just use the EMBED widget to add in an imagemap code.
3) again, i'm sorry about the type of client you have


#7

You can reproduce this type of text color using text-color: white and text-shadow: red on the top, bottom, left and right. YEY NO IMAGES!!! Here's an example:

http://jsfiddle.net/HF4Au/


#8

AWESOME !!!!! Thanks so much, Sergie.. That will work for sure !!!

Appreciate your time.. Have a great day ! smile


#9