Streaming live at 10am (PST)

Cartoon web sites with image map?

Hi

I have been using MrSite to build sites the image samples below

https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-xfp1/t31.0-8/11018904_794270487277367_3214637495408461921_o.jpg

https://scontent-lhr.xx.fbcdn.net/hphotos-xfp1/v/t1.0-9/10447499_796193187085097_6659939617569910898_n.jpg?oh=4ed63aac1f8d0b5ffe20d574bed485ff&oe=55A5BF8F

https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-xap1/v/t1.0-9/10609407_796193203751762_6398922182158586237_n.jpg?oh=5ebea7e8384ddc9d660e63acdb01fb2d&oe=55DFB827&gda=1436347387_d4611fecbe0aba1cb915f2a40708313a

These were created using image maps. Can you create image maps in Webflow, or produce something like the above but using a different technique?

Thank you

Scott

Also, whilst I’m here asking, can you

embed video animation?

Create a fixed (non-moving/scrolling) background?

Have complete freedom where you place headers, navi bars, etc?

Yes, everything, very easily.

No image-maps but you can put your bg in the site bg (body) and your main artwork in a container. Then absolute-pisitionned link boxes over what you want linking to where you want.

embed video animation: with video widget, from youtube and vimeo URLs, or with HTML widget using HTML5 video code (serach the forum for html5 video)

fixed background: check the fixed checkbox in the background settings panel

complete freedom to place what you want, as long as it’s in the browser (:

That sounds very good. The MrSite setup is very limiting, and webflow looks like it offers alot of creative freedom to set up a page however I want

Are there any tutorials for doing things like the above?

Or I suppose instead of creating one image and creating lots of links on it, could I create a central image and then place individual png images either side with links embedded in them.

Tutorial is very easy, it’s the magnificent position:absolute rule you need to master. here is it:

“Absolute positionned content is positionned regarding its closest positionned parent”

Every word counts.

So if you have a container, give it a class name and then position:relative. It changes nothing but now it’s “positionned”.

Put your image in it, or as a background of it.

Now put link blocks in it, give them dimensions, and set them to position:absolute. Now adjust the values to position them where you want, freely… their x/Y 0/0 position it the top left corner of the conteiner they’re in.

1 Like

Hey, that’s web design (:

I answered your question as you asked it, but the real answer shoud be : break down your graphical content, wtch the webflow tutorials video and build yourself a real modern kickass website! (because image-map websites are a bit of a cheat :wink: )

Thanks for all the advice Vincent. much appreciated