10 Replies - 715 Views - Last Post: 18 May 2013 - 02:44 AM

#1 Newbee1  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 14-May 13

question- how do I create hotspots that reference images in a folder?

Posted 14 May 2013 - 08:35 AM

Your code is as follows:

<area shape="rect" coords="x1,y1,x2,y2" href="http://www.somewebsite.com" alt="somewebsite" />

<area shape="circle" coords="x1,y1,z" href="http://www.somewebsite.com" alt="somewebsite" />

<area shape="poly" coords="x1,y1,x2,y2,x3,y3" href="http://www.somewebsite.com" alt="somewebsite" />


How do I use hotspots to reference images in a folder instead of using href="http://www.somewebsite.com" ?

Thanks,
Newbee1

Is This A Good Question/Topic? 0
  • +

Replies To: question- how do I create hotspots that reference images in a folder?

#2 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2884
  • View blog
  • Posts: 9,566
  • Joined: 12-December 12

Re: question- how do I create hotspots that reference images in a folder?

Posted 14 May 2013 - 09:21 AM

You could point the link at the image "http://www.somewebsite.com/images/someimage.gif". The browser will either display the image full-page or offer to download it to the users computer. Doing something other than this with the image would require Javascript and the click event.
Was This Post Helpful? 0
  • +
  • -

#3 mauro21pl  Icon User is offline

  • New D.I.C Head

Reputation: 4
  • View blog
  • Posts: 11
  • Joined: 10-May 13

Re: question- how do I create hotspots that reference images in a folder?

Posted 14 May 2013 - 09:28 AM

View Postandrewsw, on 14 May 2013 - 09:21 AM, said:

You could point the link at the image "http://www.somewebsite.com/images/someimage.gif". The browser will either display the image full-page or offer to download it to the users computer. Doing something other than this with the image would require Javascript and the click event.


Hey guys
Actually I think you would be better of using relative path instead of absolute. You could either go with

	<div style="width:100px;">
		<a href='images/myImage.jpg'>
			<span style="display:block; width:100px; height:100px;margin-top:20px;margin-left:20px"></span>
		</a>
	</div>



or in Newbee1's case:
	<img src="images/myImage.jpg" alt="image" usemap="#mymap" width="600" height="400" />
	<map name="mymap" id="mymap">
		<area shape="rect" coords="0,0,100,100" href="images/myImage1.jpg"/>
		<area shape="rect" coords="200,200,300,300" href="images/myImage2.jpg"/>
	</map>


Was This Post Helpful? 2
  • +
  • -

#4 Newbee1  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 14-May 13

Re: question- how do I create hotspots that reference images in a folder?

Posted 15 May 2013 - 08:43 PM

Second request for help.
I got a quick response on my first attempt but it was not what I needed. My fault! I was not clear that I am trying to use colored dots as hotspots on a rectanguiar map to represent objects. Clicking on a colored dot would display a jpg image of the object in a separate, small window. I tried variations of rect and circle hotspots.

The map is named "Campus" which is the campus.jpg image. Clicking on a green dot on the campus image should display a jpg image of a tree in a small window.The images (tree, bush & wall are stored in the same folder as the Campus html page and campus jpg on the desktop. I may not need to reference a web page. All the documentation examples I find demonstrate how to display separate web pages by clicking on a hotspot. My question is, "How do I retrieve a jpg image from the same folder by clicking a hotspot"? Sorry I could not locate the first question I submitted.
I am definitely a "Newbie".Thanks in advance.

<table border="5">
<tr>
<td>
<img src="Campus.jpg" alt="Campus Landscape" usemap="#Campus" width="1200" height="800" />
<map name="Campus" id="Campus">
<area shape="rect" coords="1817,240,2087,284" href="PineTree.html" />
<area shape="rect" coords="1818,144,2038,200" <a href="Bush.jpg" /a>
<area shape="circle" coords="1813,359,13" href="Wall.html" />

</map>
</td>
</tr>
</table>
Was This Post Helpful? 0
  • +
  • -

#5 macosxnerd101  Icon User is offline

  • Self-Trained Economist
  • member icon




Reputation: 10183
  • View blog
  • Posts: 37,596
  • Joined: 27-December 08

Re: question- how do I create hotspots that reference images in a folder?

Posted 15 May 2013 - 08:48 PM

Duplicate threads merged. Please avoid duplicate posting.
Was This Post Helpful? 0
  • +
  • -

#6 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2884
  • View blog
  • Posts: 9,566
  • Joined: 12-December 12

Re: question- how do I create hotspots that reference images in a folder?

Posted 16 May 2013 - 02:29 AM

Quote

My question is, "How do I retrieve a jpg image from the same folder by clicking a hotspot"?

This question has already been answered and, as I mentioned, if you want to do anything other than the default behaviour, such as opening a small window, this would require the use of Javascript.

BTW
This HTML is incorrect:

<area shape="rect" coords="1818,144,2038,200" <a href="Bush.jpg" /a>

Why are you using a table when there is only one cell? The table is unnecessary.
Was This Post Helpful? 2
  • +
  • -

#7 Newbee1  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 14-May 13

Re: question- how do I create hotspots that reference images in a folder?

Posted 16 May 2013 - 04:58 AM

View PostNewbee1, on 14 May 2013 - 08:35 AM, said:

Your code is as follows:

<area shape="rect" coords="x1,y1,x2,y2" href="http://www.somewebsite.com" alt="somewebsite" />

<area shape="circle" coords="x1,y1,z" href="http://www.somewebsite.com" alt="somewebsite" />

<area shape="poly" coords="x1,y1,x2,y2,x3,y3" href="http://www.somewebsite.com" alt="somewebsite" />


How do I use hotspots to reference images in a folder instead of using href="http://www.somewebsite.com" ?

Thanks,
Newbee1

Was This Post Helpful? 0
  • +
  • -

#8 Newbee1  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 14-May 13

Re: question- how do I create hotspots that reference images in a folder?

Posted 16 May 2013 - 05:29 AM

Thanks for the quick reply. The code works but is not what I need. I do not want to reference other webpages but images on my PC. How do I reference jpg images stored on my desktop in the sme folder as the map with hotspots?
I tried the following code segments. Click on a light green dot to display the tree.jpg in a small window. Click on a dark green dot to display the bush.jpg. Click on a red dot hotspot to display a rosebed.jpg. There are multiple trees, bushes and rosebeds represented by colored hotspot dots on the backyard image map.

<table border="5">
    <tr>
	<td>
	<img src="backyard.jpg" alt="backyard" usemap="#backyard" width="1200" height="800" /> 
	<map name="backyard" id="backyard">
	<area shape="rect" coords="1817,240,2087,284" href="tree.html" target="viewer" />
	<area shape="rect" coords="1818,144,2038,200" href="bush.jpg" />
	<area shape="circle" coords="1813,359,13" href="rosebed.html" />

	</map>
	</td>
    </tr>
</table>
	



I could not find my post and submitted one response to the wrong forum. I even sent it with a title before I had completed my response. Sorry! I posted it again but I thin k both were removed because of the duplicate title.
Thanks,
Charlie

This post has been edited by macosxnerd101: 16 May 2013 - 11:11 AM
Reason for edit:: Fixed code tags. Please use BBCode, not XML.

Was This Post Helpful? 0
  • +
  • -

#9 Newbee1  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 14-May 13

Re: question- how do I create hotspots that reference images in a folder?

Posted 16 May 2013 - 11:12 AM

The response was quick and what I needed to know. I will research javascripts for the answer as suggested. Also, I will eliminate the table code. I intended to make two cells after I got the one functioning. I can just use a small view window instead.
Thanks again,
Newbee1
Was This Post Helpful? 0
  • +
  • -

#10 Newbee1  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 14-May 13

Re: question- how do I create hotspots that reference images in a folder?

Posted 17 May 2013 - 09:11 PM

The most useful info was that javascript is the answer. I don't have a "www.somewhere.website" to reference. I discovered w3school.com so I will spend my time there learning. Thanks for your time and help.
Was This Post Helpful? 0
  • +
  • -

#11 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2884
  • View blog
  • Posts: 9,566
  • Joined: 12-December 12

Re: question- how do I create hotspots that reference images in a folder?

Posted 18 May 2013 - 02:44 AM

w3schools is not the best but, unfortunately, most online JS tutorials are out-dated. This htmldog tutorial looks good as well as about.com.

Strangely, most JS books are more up-to-date than online tutorials :dontgetit:. Javascript & jQuery: The Missing Manual looks good :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1