WordPress.org

Ready to get started?Download WordPress

Forums

Image Map in Page (29 posts)

  1. sparklyscotty
    Member
    Posted 2 years ago #

    Hi,

    I am trying to insert a mapped image into a page.

    I used mappet (http://riddle.pl/mappet/) to create the html and css for the image.

    I put the html in the page, and the css in the theme's stylesheet.

    Alas, no joy. http://www.angelaneal.com/web-services/online-business-boost/

    Can anyone point out what I did wrong? I see a lot of posts about image maps and headers, but couldn't find a solution for image maps in pages.

    Thanks in advance for your help!

  2. Zstar7
    Member
    Posted 2 years ago #

    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

  3. Zstar7
    Member
    Posted 2 years ago #

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

  4. esmi
    Forum Moderator
    Posted 2 years ago #

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

  5. sparklyscotty
    Member
    Posted 2 years ago #

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

  6. Zstar7
    Member
    Posted 2 years ago #

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

  7. Phil
    Member
    Posted 2 years ago #

    Get out of here, this forum is for 'proper' WordPress users ;)

  8. sparklyscotty
    Member
    Posted 2 years ago #

    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.

  9. esmi
    Forum Moderator
    Posted 2 years ago #

    bernicesalmon.wordpress.com is not.

  10. shoclabs
    Member
    Posted 2 years ago #

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

  11. bergmw
    Member
    Posted 2 years ago #

    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.

  12. Zstar7
    Member
    Posted 2 years ago #

    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

  13. Zstar7
    Member
    Posted 2 years ago #

    Angela, could you solve the problem?

  14. bergmw
    Member
    Posted 2 years ago #

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

    <div style="text-align:center; width:500px; margin-left:auto; margin-right:auto;">
    <img id="Image-Maps_2201110181822565" src="http://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="http://www.billbergman.com" alt="Assembly" title="Assembly" onMouseOver="if(document.images) document.getElementById('Image-Maps_2201110181822565').src= 'http://dl.dropbox.com/u/18377868/shopmap/ShopAssembly.gif';" onMouseOut="if(document.images) document.getElementById('Image-Maps_2201110181822565').src= 'http://dl.dropbox.com/u/18377868/shopmap/shop.gif';"  />
    <area shape="rect" coords="10,10,195,236" href="http://www.billbergman.com" alt="Machine Room" title="Machine Room" onMouseOver="if(document.images) document.getElementById('Image-Maps_2201110181822565').src= 'http://dl.dropbox.com/u/18377868/shopmap/ShopMachineRm.gif';" onMouseOut="if(document.images) document.getElementById('Image-Maps_2201110181822565').src= 'http://dl.dropbox.com/u/18377868/shopmap/shop.gif';"  />
    <area shape="rect" coords="140,246,260,415" href="http://www.billbergman.com" alt="Mill" title="Mill" onMouseOver="if(document.images) document.getElementById('Image-Maps_2201110181822565').src= 'http://dl.dropbox.com/u/18377868/shopmap/ShopMill.gif';" onMouseOut="if(document.images) document.getElementById('Image-Maps_2201110181822565').src= 'http://dl.dropbox.com/u/18377868/shopmap/shop.gif';"  />
    <area shape="rect" coords="263,245,383,414" href="http://www.billbergman.com" alt="Laser" title="Laser" onMouseOver="if(document.images) document.getElementById('Image-Maps_2201110181822565').src= 'http://dl.dropbox.com/u/18377868/shopmap/ShopLaser.gif';" onMouseOut="if(document.images) document.getElementById('Image-Maps_2201110181822565').src= 'http://dl.dropbox.com/u/18377868/shopmap/shop.gif';"  />
    <area shape="rect" coords="386,244,492,413" href="http://www.billbergman.com" alt="Ceramics" title="Ceramics" onMouseOver="if(document.images) document.getElementById('Image-Maps_2201110181822565').src= 'http://dl.dropbox.com/u/18377868/shopmap/ShopCeramics.gif';" onMouseOut="if(document.images) document.getElementById('Image-Maps_2201110181822565').src= 'http://dl.dropbox.com/u/18377868/shopmap/shop.gif';"  />
    <area shape="rect" coords="496,438,498,440" href="http://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!!

  15. bergmw
    Member
    Posted 2 years ago #

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

  16. Determined75
    Member
    Posted 2 years ago #

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

  17. sparklyscotty
    Member
    Posted 2 years ago #

    The problem did indeed seem to get solved, but to be honest I was messing with so many "fixes" that I don't know what actually worked!

  18. derekbanas
    Member
    Posted 2 years ago #

    Here is code that works in a WordPress post. No need for plugins, or anything else. Just copy and paste it in the post. Make sure you have the html tab clicked

    <div>
    <img class="alignnone" id="imageMaps" src="http://businessplumbing.com/wp-content/uploads/2011/11/Sloan-Royal-Flushometer.png" alt="" width="298" height="595" usemap="#flushometer" border="0" />
    
    <map name="flushometer" id="flushometer"> 
    
    <area shape="rect" coords="219,6,277,41" href="http://businessplumbing.com/products-page/lavatory-sink/sloan-royal-flushometer-a-72-cp-cover/" alt="A-72 CP Cover" />
    
    <area shape="rect" coords="218,42,278,70" href="http://businessplumbing.com/products-page/lavatory-sink/sloan-royal-flushometer-a-71-inside-cover/" alt="A-71 Inside Cover" />
    
    </map>
    </div>

    WordPress seems to get irritated if you create multiple maps around every area. Dreamweaver does that, so that may be the reason so many people are having trouble? I have more example code here if you need further help. newthinktank.com/2011/12/image-maps-in-wordpress-posts/

  19. smcelligott
    Member
    Posted 2 years ago #

    Zstar7 - Many thanks. That did the trick for me. Had problems with the html, but css worked great. Dropped it in and all worked like a charm. And I must say, who cares if someone has a self hosted site, if they provide a solution that works - get a life esmi . . .

  20. bpalic
    Member
    Posted 2 years ago #

    Hi, I am very new to this forum so I hope someone can help me. I am trying to insert an image map of a price comparison table into a post. I have successfullu uploaded the image and have all the correct co-ordinates. I am also able to get the image to load into the post with correct section of the image successfully being linked.

    My issue is the following: The image looks very crisp when it is only the image (without image mapping) being uploaded. The moment the image map is loaded (using the same HTML code as derekbanas) the image loses its sharpness.

    Would anyone know what might be causing the loss in quality? The image is in .png format.

    Thanks for your help

  21. smcelligott
    Member
    Posted 2 years ago #

    For starters I would convert the file to jpg (use pixlr.com, as it is the easiest coverter). A png file is unnecessarily large unless you need the file to be transparent. If that is the case, your problem is likely that the file is still too large. Try reducing the image size if that is possible. Do you know how large the file is?

  22. bpalic
    Member
    Posted 2 years ago #

    Hey smcelligott, thanx so much for taking the time to reply. I checked the size of the png file and it was 94kb, which I would assume is not very big.

    However I did, under inspiration from a higher source, figure out that the dimension fo the image was incorrect. In the image map HTML, I used teh wrong domensions for the image. This caused the loss in quality. The image size that is stated in the HTML, needs to match the image size of the image uploaded to WordPress otherwise the image will appear a little funky.

    Thanks again

  23. jsimmonshospice
    Member
    Posted 2 years ago #

    Derekbanas -
    Thanks so much for sharing your code! It worked like a charm!!
    Best,
    Jean

  24. Jonas Grumby
    Member
    Posted 2 years ago #

    Let me just add that once you do this you can NEVER use the Visual editor to edit (or even look at) that page or WordPress will wipe out the code. So, keep a backup of the code somewhere in case it gets wiped.

  25. CoastalData
    Member
    Posted 2 years ago #

    Just for the record, I hate the way that WP wipes out code. Is there no way to control that at all? Still?

  26. esmi
    Forum Moderator
    Posted 2 years ago #

    It's not WP, per se. It's the TinyMCE WYSIWYG editor. And, no, there isn't a fix shorty of installing another WYSIWYG editor plugin.

  27. CoastalData
    Member
    Posted 2 years ago #

    Ugh. I've tried the other editors; they aren't much better, and lose WP functionality. I just can't believe that the editor maintainers haven't ever thought to correct that annoying behavior.

  28. esmi
    Forum Moderator
    Posted 2 years ago #

    TinyMCE was not developed by WordPress.

  29. a4jp.com
    Member
    Posted 2 years ago #

    Can someone from the WordPress team fix the code stripping visual tab so it doesn't destroy image maps when we click on it or strip out Rich snippets (Microdata)?

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags