Image Map in Page

Hi Angela,

I used the html code in Image Mapping to add in wordpress. See below link if this is what you were trying to do. Let me know. Bernice

bernicesalmon.wordpress.com/?p=86&preview=true

These forums are for self-hosted WordPress sites only. Please try asking your question on https://en.forums.wordpress.com/

Yes! That is exactly what I need to do. ?? Did you use a plugin?

Hi, see if this helps you. https://bernicesalmon.wordpress.com/2011/09/12/138/
Good Luck, let me know. Bernice

Get out of here, this forum is for ‘proper’ WordPress users ??

Esmi – the site is self-hosted. Not sure why you would think it wasn’t.

Bernice – I’ll try that site. Same as the other service I was using except that one spit out the css as well as the html and for the life of me I can’t get it to function within the theme css.

Thanks.

bernicesalmon.wordpress.com is not.

Stop! It’s the WordPress Police! So what if the site Zstar7 recommended is not self hosted? You are a self important idiot Esmi

Hello,

Have you solved your problem? I am looking to something similar with rollover images as well. WordPress is swallowing my code.
Any suggestions would be great.

Thanks.

Hi, mail me your link or rollover images and I’ll see what I can do. Let’s see what trouble I get into now. LOL

Angela, could you solve the problem?

Here is the code I created at https://www.image-maps.com

<div style="text-align:center; width:500px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_2201110181822565" src="https://dl.dropbox.com/u/18377868/shopmap/shop.gif" usemap="#Image-Maps_2201110181822565" border="0" width="500" height="442" alt="" />
<map id="_Image-Maps_2201110181822565" name="Image-Maps_2201110181822565">
<area shape="rect" coords="206,0,434,172" href="https://www.billbergman.com" alt="Assembly" title="Assembly" onMouseOver="if(document.images) document.getElementById('Image-Maps_2201110181822565').src= 'https://dl.dropbox.com/u/18377868/shopmap/ShopAssembly.gif';" onMouseOut="if(document.images) document.getElementById('Image-Maps_2201110181822565').src= 'https://dl.dropbox.com/u/18377868/shopmap/shop.gif';"  />
<area shape="rect" coords="10,10,195,236" href="https://www.billbergman.com" alt="Machine Room" title="Machine Room" onMouseOver="if(document.images) document.getElementById('Image-Maps_2201110181822565').src= 'https://dl.dropbox.com/u/18377868/shopmap/ShopMachineRm.gif';" onMouseOut="if(document.images) document.getElementById('Image-Maps_2201110181822565').src= 'https://dl.dropbox.com/u/18377868/shopmap/shop.gif';"  />
<area shape="rect" coords="140,246,260,415" href="https://www.billbergman.com" alt="Mill" title="Mill" onMouseOver="if(document.images) document.getElementById('Image-Maps_2201110181822565').src= 'https://dl.dropbox.com/u/18377868/shopmap/ShopMill.gif';" onMouseOut="if(document.images) document.getElementById('Image-Maps_2201110181822565').src= 'https://dl.dropbox.com/u/18377868/shopmap/shop.gif';"  />
<area shape="rect" coords="263,245,383,414" href="https://www.billbergman.com" alt="Laser" title="Laser" onMouseOver="if(document.images) document.getElementById('Image-Maps_2201110181822565').src= 'https://dl.dropbox.com/u/18377868/shopmap/ShopLaser.gif';" onMouseOut="if(document.images) document.getElementById('Image-Maps_2201110181822565').src= 'https://dl.dropbox.com/u/18377868/shopmap/shop.gif';"  />
<area shape="rect" coords="386,244,492,413" href="https://www.billbergman.com" alt="Ceramics" title="Ceramics" onMouseOver="if(document.images) document.getElementById('Image-Maps_2201110181822565').src= 'https://dl.dropbox.com/u/18377868/shopmap/ShopCeramics.gif';" onMouseOut="if(document.images) document.getElementById('Image-Maps_2201110181822565').src= 'https://dl.dropbox.com/u/18377868/shopmap/shop.gif';"  />
<area shape="rect" coords="496,438,498,440" href="https://www.image-maps.com/index.php?aff=mapped_users_2201110181822565" alt="Image Map" title="Image Map" />
</map>
</div>

This was a test so the links all go the same location.
Thanks!!

What happens, spedifically, is the code is stripped from after the second line of code until the </div>, the last line of code.

sparklyscotty did you successfully do the image mapping on a page? Can you share how you solved your problem?