Mapped area for hotlinks - Post ID...

User 2546203 Photo


Registered User
5 posts

It is a 2 row by 6 column pic - divided up into 12 hotlinks. At the bottom of the page.
The far right 5 & 6 columns read different links depending upon if you hover the mouse on the left side or the right side of the pics... I have the "hot" areas match the rectangles. Should I reduce these "hot" areas or maybe turn them into circles in order to better correctly match the picture with the links.
Thanks for looking.
I want to purchase this after the trial - but want to make sure it works 100%.

Ted Stalets
User 38401 Photo


Senior Advisor
10,951 posts

Hiya ts,

Do you have a link to the site page in question?
User 187934 Photo


Senior Advisor
20,271 posts

I would narrow down the linked area so the true destination is chosen.:)
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2546203 Photo


Registered User
5 posts

Hi,

I drew in the rectangles by about half and the first 3 columns on both rows are fine for tracking the hotlinks - but the columns 4, 5, and 6 start veering off to the point that they aren't accurate.
The site is TennesseeLifestyle.com - bottom of page.
I'll attach showing the hotlink rectangles...

I guess I could go smaller still but need to make it so the consumer doesn't have to hunt for the link...

Ted
User 187934 Photo


Senior Advisor
20,271 posts

Did you use Coffeecups image mapper to make that?
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2546203 Photo


Registered User
5 posts

Yes sir.

Coffeecup Image Mapper - the latest version. Maybe it is the wordpress theme at http://TennesseeLifestyle.com that is causing the rectangle readings to diverge as you move across to the right side of the picture.

I downloaded the trial to check it out - I can tell if I can get it to sync right - it will be great.

Ted
User 187934 Photo


Senior Advisor
20,271 posts

Will you verify that the coordinates are the same in your page source code as they are in the image mapper?
<map name="cities">
<area name="Belle Meade Homes" shape="rect" coords="51,27,132,142" href="/belle-meade-homes" alt="Belle Meade Homes" title="Belle Meade Homes" target="_self">
<area name="Brentwood Homes" shape="rect" coords="223,27,304,142" href="/brentwood-homes" alt="Brentwood Homes" title="Brentwood Homes" target="_self">
<area name="Clarksville Homes" shape="rect" coords="395,26,476,141" href="/clarksville-homes" alt="Clarksville Homes" title="Clarksville Homes" target="_self">
<area name="Franklin Homes" shape="rect" coords="571,27,652,142" href="/franklin-homes" alt="Franklin ,Homes" title="Franklin Homes" target="_self">
,<br />
<area name="Gallatin Homes" shape="rect" coords="745,28,826,143" href="/gallatin-homes" alt="Gallatin Ho,mes" title="Gallatin Homes" target="_self">
<area name="Green Hills Homes" shape="rect" coords="923,27,1004,143" href="/green-hills-homes" alt="Green Hills Homes" title="Green Hills Homes" target="_self">
<area name="Hendersonville Homes" shape="rect" coords="42,206,123,321" href="/hendersonville-homes" alt="Hendersonville Homes" title="Hendersonville Homes" target="_self">
<area name="LaVergne Homes" shape="rect" coords="221,205,302,320" href="/lavergne-homes" alt="LaVergne Homes" title="LaVergne Homes" target="_self">
<area name="Mt. Juliet Homes" shape="rect" coords="396,206,477,321" href="mt.-juliet-homes" alt="Mt. Juliet Homes" title="Mt. Juliet Homes" target="_self">
<area name="Murfreesboro Homes" shape="rect" coords="567,205,648,320" href="/murfreesboro-homes" alt="Murfreesboro Homes" title="Murfreesboro Homes" target="_self">
<area name="Smyrna Homes" shape="rect" coords="745,205,826,320" href="/smyrna-homes" alt="Smyrna Homes" title="Smyrna Homes" target="_self">
<area name="Spring Hill Homes" shape="rect" coords="920,205,1001,320" href="/spring-hill-homes" alt="Spring Hill Homes" title="Spring Hill Homes" target="_self">
</map>
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2546203 Photo


Registered User
5 posts

Hi,
Went in and tried again... The code at Coffeecup and the html on the page at the website are identical. As you move to the right from column 1 to column 6 - the hot link area moves further and further to the right - column 5 hot area is to the right of the image...
Appreciate you helping me to figure this out. I've attached the saved html image (oops - didn't allow html for attaching) and can give you access to the backend of the Wordpress site if you like.


<img src="/wp-content/uploads/2013/04/Cities.jpg" USEMAP="#cities" BORDER=0>
<map name="cities">
<area name="Belle Meade Homes" shape="rect" coords="48,42,108,106" href="/belle-meade-homes" alt="Belle Meade Homes" title="Belle Meade Homes" target="_self">
<area name="Brentwood Homes" shape="rect" coords="229,51,280,109" href="/brentwood-homes" alt="Brentwood Homes" title="Brentwood Homes" target="_self">
<area name="Clarksville Homes" shape="rect" coords="400,47,451,110" href="/clarksville-homes" alt="Clarksville Homes" title="Clarksville Homes" target="_self">
<area name="Franklin Homes" shape="rect" coords="572,51,626,113" href="/franklin-homes" alt="Franklin Homes" title="Franklin Homes" target="_self">
<area name="Gallatin Homes" shape="rect" coords="756,48,808,110" href="/gallatin-homes" alt="Gallatin Homes" title="Gallatin Homes" target="_self">
<area name="Green Hills Homes" shape="rect" coords="934,49,982,110" href="/green-hills-homes" alt="Green Hills Homes" title="Green Hills Homes" target="_self">
<area name="LaVergne Homes" shape="rect" coords="229,224,287,286" href="/lavergne-homes" alt="LaVergne Homes" title="LaVergne Homes" target="_self">
<area name="Spring Hill Homes" shape="rect" coords="936,226,991,291" href="/spring-hill-homes" alt="Spring Hill Homes" title="Spring Hill Homes" target="_self">
<area name="Smyrna Homes" shape="rect" coords="764,224,818,288" href="/smyrna-homes" alt="Smyrna Homes" title="Smyrna Homes" target="_self">
<area name="Murfreesboro Homes" shape="rect" coords="569,234,630,290" href="/murfreesboro-homes" alt="Murfreesboro Homes" title="Murfreesboro Homes" target="_self">
<area name="Mt. Juliet Homes" shape="rect" coords="404,231,460,289" href="mt.-juliet-homes" alt="Mt. Juliet Homes" title="Mt. Juliet Homes" target="_self">
<area name="Hendersonville Homes" shape="rect" coords="54,224,105,284" href="/hendersonville-homes" alt="Hendersonville Homes" title="Hendersonville Homes" target="_self">
</map>
User 187934 Photo


Senior Advisor
20,271 posts

It's it's the responsive code that's causing the problem. The coordinates need to change with the view port and their not.:)
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2546203 Photo


Registered User
5 posts

That makes total sense.
Thanks for helping me get to the bottom of things!

Ted

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.