image part hyperlink

I have the following image:image
Question: In image tag alone, how can I create hyperlinks so that clicks on blue and pink boxes to navigate to different ids?

If it is not possible to do this without java script, then what is a practical solution for this.

FYI, this will be used to create EE article (I believe it is using html5). Possibly, if any javascript it has to be embedded in <img>.  

Thank you.
LVL 34
Mike EghtebasDatabase and Application DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dave BaldwinFixer of ProblemsCommented:
I normally overlay the larger image with transparent GIFs and create the link on them.
0
dsackerContract ERP Admin/ConsultantCommented:
I'm using google.com and yahoo.com as the two example links, so you would need to change those. But the following shows how you would map an area within your image:
<img src="Navigate.png" usemap="#NavMap">
<map name="NavMap">
  <area shape="rect" coords="65,54,240,168"  href="http://google.com" alt="Google">
  <area shape="rect" coords="292,54,464,168" href="http://yahoo.com"  alt="Yahoo">
</map>

Open in new window

Because you have rectangles, those are the easiest. The first two numbers are the upper left corner of your rectangle, and the last two numbers are the lower right corner.

The "rect" map denotes a rectangle, whereby the coords="x1,y1,x2,y2".
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Dave BaldwinFixer of ProblemsCommented:
Now that @dsacker mentions it, an image-map is probably a better idea.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Edwin HofferTechnical ExpertCommented:
Hello eghtebas,

You can do it easily using Adobe Dreamweaver.

Below I shared steps to add link on images:

Open the Design panel and select the image, below you will see Rectangle Hotspot button, click on that (see below image for help):

rectangle hotspot
Now select part of the image and you will see Link, Target & Alt text in bottom.

add-link
For help I added the link on attached html file, please check.

Need more help, feel free to ask.

Best Regards
Untitled-1.html
0
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
Hi dsacker,
After adding some text and Navigate.png, in EE article edit, I get the following source code: (The following shows the image okay)
<b>Subquery</b> is nesting of inner query in an outer query. It allows you to refer to one query’s result from another. The different types of subqueries include different types of table expressions. APPLY table operator also is used with subqueries. <b>Views</b> and <b>inline table-valued functions</b> also use <b>Subqueries</b>.  Click on color coded boxes for sample code and explnations. <br>

<!-- ------------ Image hyperlink tag produced by EE when adding Navigate.png --------  --> 

<a href="http://filedb.experts-exchange.com/incoming/2015/05_w19/912330/Navigate.png" onclick="return false;" target="_blank" title="Navigate.png">

<!-- ---------------- Image tag produced by EE when adding Navigate.png ---------------  --> 

<img alt="Navigate.png" class="file-block" src="http://filedb.experts-exchange.com/incoming/2015/05_w19/912330/Navigate.png" style="max-width: 535px;">

</a> <br>

<!-- ------------------------ End of image related tags -------------------------------  --> 

<b style="font-size: 14px; text-align: center; line-height: 23.3800010681152px;">FIguer 1: Subqueries at a glance.</b><br>
<br>
Self-contained: Independent of the outer query (has no reference to elements in the outer query).  In terms of the result of the subquery, it can be scalar or multivalued

Open in new window


I am trying to revise the above source code to apply your solution. When I remove the <a> tag (lines 5 and 11) the image disappears. I will keep trying different ways of doing it until I get it right but I though you may see the solution right away and before I get to try it.

But, after making the following change to the source code, the image disappears:
<!--
<a href="http://filedb.experts-exchange.com/incoming/2015/05_w19/912330/Navigate.png" onclick="return false;" target="_blank" title="Navigate.png">

<img alt="Navigate.png" class="file-block" src="http://filedb.experts-exchange.com/incoming/2015/05_w19/912330/Navigate.png" style="max-width: 535px;">

</a> 
--><br>
<img src="http://filedb.experts-exchange.com/incoming/2015/05_w19/912330/Navigate.png" usemap="#NavMap"><map name="NavMap"><area alt="Google" coords="65,54,240,168" href="http://google.com" shape="rect"> <area alt="Yahoo" coords="292,54,464,168" href="http://yahoo.com" shape="rect"></map> <b style="font-size: 14px; text-align: center; line-height: 23.3800010681152px;">FIguer 1: Subqueries at a glance.</b><br>

Open in new window


@Edwin Hoffer, I do not have dreamweaver.

After I put back <a> tage, the image shows up by google or yahoo are not accessed from blue and pink boxes:
<a href="http://filedb.experts-exchange.com/incoming/2015/05_w19/912330/Navigate.png" onclick="return false;" target="_blank" title="Navigate.png">
<img src="http://filedb.experts-exchange.com/incoming/2015/05_w19/912330/Navigate.png" usemap="#NavMap"><map name="NavMap"><area alt="Google" coords="65,54,240,168" href="http://google.com" shape="rect"> <area alt="Yahoo" coords="292,54,464,168" href="http://yahoo.com" shape="rect"></map> <b style="font-size: 14px; text-align: center; line-height: 23.3800010681152px;">FIguer 1: Subqueries at a glance.</b></a><br>

Open in new window

0
Edwin HofferTechnical ExpertCommented:
Hello,

Check the below code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<img src="http://filedb.experts-exchange.com/incoming/2015/05_w19/912330/Navigate.png" alt="box" width="535" height="219" border="0" usemap="#Map" />
<map name="Map" id="Map">
  <area shape="rect" coords="63,52,242,171" href="http://yahoo.com" target="_blank" alt="blue" />
</map>
<b style="font-size: 14px; text-align: center; line-height: 23.3800010681152px;">FIguer 1: Subqueries at a glance.</b>
</body>
</html>

Open in new window


Best Regards
0
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
Hi Edwin,

Please take the following source code and start an article named tempArticle (you will save it as draft but delete it after some test to resolve the issue I am having). Per the code below, it is expected to open google and yahoo depending which box is clicked on. But they do not open and I am trying to figure out why.
<b>Subquery</b> is nesting of inner query in an outer query. It allows you to refer to one query’s result from another. The different types of subqueries include different types of table expressions. APPLY table operator also is used with subqueries. <b>Views</b> and <b>inline table-valued functions</b> also use <b>Subqueries</b>.  Click on color coded boxes for sample code and explnations. <br>
<a href="http://filedb.experts-exchange.com/incoming/2015/05_w19/912330/Navigate.png" onclick="return false;" target="_blank" title="Navigate.png"><img src="http://filedb.experts-exchange.com/incoming/2015/05_w19/912330/Navigate.png" usemap="#NavMap"><map name="NavMap"><area alt="Google" coords="65,54,240,168" href="http://google.com" shape="rect"><br>
<area alt="Yahoo" coords="292,54,464,168" href="http://yahoo.com" shape="rect"></map> </a><b style="font-size: 14px; text-align: center; line-height: 23.3800010681152px;"> FIguer 1: Subqueries at a glance.</b><br>
<br>
Self-contained: Independent of the outer query (has no reference to elements in the outer query).  In terms of the result of the subquery, it can be scalar or multivalued

Open in new window


BTW, the exact same image should be available to you as well via EE

Mike
0
dsackerContract ERP Admin/ConsultantCommented:
Hi Mike. It seems that EE has some tight constraints that present your saved draft as a modified version, closing off injected links, whether through an area map, <a href="link"> or javascript onclick in the <img> tag. I tried all three. I even broke the picture into two parts. They fit seamlessly next to each other, but the links still didn't work.

My solution with the area map coordinates will work on your own web page, but EE will not allow the injected links in any article on their site.
0
Edwin HofferTechnical ExpertCommented:
Try below code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<b style="font-size: 14px; text-align: center; line-height: 23.3800010681152px;">FIguer 1: Subqueries at a glance.</b>
<b>Subquery</b> is nesting of inner query in an outer query. It allows you to refer to one query’s result from another. The different types of subqueries include different types of table expressions. APPLY table operator also is used with subqueries. <b>Views</b> and <b>inline table-valued functions</b> also use <b>Subqueries</b>.  Click on color coded boxes for sample code and explanations. <br>
<img src="http://filedb.experts-exchange.com/incoming/2015/05_w19/912330/Navigate.png" alt="box" width="535" height="219" border="0" usemap="#Map" />
<map name="Map" id="Map">
  <area shape="rect" coords="62,53,243,171" href="http://www.google.com" onClick="return f();" target="_blank" title="Navigate.png" alt="google" />
  <area shape="rect" coords="291,52,466,172" href="http://www.yahoo.com" onclick="return f();" target="_blank" title="Navigate.png" alt="yahoo" />
</map>
</body>
</html>

Open in new window

0
dsackerContract ERP Admin/ConsultantCommented:
Hi Edwin. Just like I said above your post, the picture will be edited out of the saved presentation in EE. You can save it as an article draft (not published), and you'll see for yourself. The picture shows up in the editor, but once you save it, it will not show up in the draft presentation.

EE has bitten down on this.
0
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
I have sent an email to EE technical team to take a look at this question to advise how to do this. Also I have requested to add this improvement if currently not practical. I will wait for a while to see how they respond.

Thanks all,

Mike

I also tried the following but didn't work:
<map name="NavMap">
   <img src="http://filedb.experts-exchange.com/incoming/2015/05_w19/912330/Navigate.png" usemap="#NavMap">
   <area alt="Yahoo" coords="292,54,464,168" href="http://yahoo.com" shape="rect"> 
   <area alt="Google" coords="65,54,240,168" href="http://google.com" shape="rect"> 
</map>

Open in new window

0
Edwin HofferTechnical ExpertCommented:
Hello,

The img file shouldn't be in the map code, please it above the map code, I have been updated the code:

Check the below code:

<img src="http://filedb.experts-exchange.com/incoming/2015/05_w19/912330/Navigate.png" usemap="#NavMap">
<map name="NavMap">   
   <area alt="Yahoo" coords="292,54,464,168" href="http://yahoo.com" shape="rect"> 
   <area alt="Google" coords="65,54,240,168" href="http://google.com" shape="rect"> 
</map>

Open in new window


Hope that works

Best Regards
0
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
Hi Edwin,

You are correct; but because having <img ...> first then <map...> next didn't work, I was trying any other possibilities (meaning I put <img ...> inside <map...>) which didn't work either.

Mike
0
Edwin HofferTechnical ExpertCommented:
Its working for me, please check again or use chrome/firefox.
0
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
Edwin,

Are you familiar with EE article editor environment? You need to test there. On the top, click on Contribute/write an article you will see what I mean. Please test it all there where options are very limited.

Mike
0
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
Thank you all, finally I had to do: http://www.experts-exchange.com/articles/18366/Subqueries-at-a-glance.html

They are now considering to expand the capabilities for article edit.

Mike
0
Edwin HofferTechnical ExpertCommented:
Hello,

Now I got it you were asking the image link code to work on your article and I took it wrong I thought you are using it on your website :D.

Best Regards
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.