Linking to an image

EbookNoob · 05-09-2013, 05:37 PM

Does anyone know how to link to images that are placed throughout the chapters of the book. I had no problem linking to references, endnotes, and chapter headers. On the Ipad the links brought up the images in a separate window which was fine. On the Nook simple touch and the hd+ the links did not work at all. Also, when converted to .mobi the links did not work on the kindle fire. Does anyone have any tips on how to link directly to the image either on the actual page where it is located or in another window. An example of the code I am using is:

By doing so, we can know the effects of modifying the meplat on the BC of the 168 grain VLD. Figures <a
href="../Images/ABDOC_109_1_7mmPart1p5.jpg"><b>5</b></a> and <a href="../Images/ABDOC_109_1_7mmPart1P6.jpg"><b>6</b></a> show the results of the BC testing.</p>

The code for one of the images is:

<div class="image"><img alt="ABDOC_109_1_7mmPart1p5" src="../Images/ABDOC_109_1_7mmPart1p5.jpg" /></div>

DomesticExtremis · 05-09-2013, 06:27 PM

You need to use the <a> tag with 'id' attribute. if you want to make sure it doesn't open in a new window, use target=_self

So if you have somefile.xhtml:

Code:

<div class="image"><img alt="ABDOC_109_1_7mmPart1p5" src="../Images/ABDOC_109_1_7mmPart1p5.jpg" ><aid="someid"></a></img></div>

and in someotherfile.xhtml

Code:

...
<p>By doing so, we can know the effects of modifying the meplat on the BC of the 168 grain VLD. Figures <a
href="somefile.xhtml#someid" target="_self"><b>5</b></a> and...</p>
...

Turtle91 · 05-10-2013, 01:09 AM

Use of the "target" attribute MAY not validate properly. It SHOULD default to self if used in a reader/app, but on a PC it depends on the browser settings.

Jellby · 05-10-2013, 03:32 AM

You don't need to add an <a> element as anchor, you can simply add an ""id" attribute:

Code:

<div class="image" id="someid"><img alt="" src="..." /></div>

and then use <a href="..."> as normal.

PS. Do not add some meaningless text in the "alt" attribute. The alt attribute is intended to be shown/read when the image is not displayed. It should be something descriptive if the image is something important, but if it's just a decorative image it's better left blank.

EbookNoob · 05-10-2013, 11:03 AM

Thanks for the help everyone! Does anyone have a good idea on how to link back from the image to the reference in the text. On the newer readers if you click the image it opens up in a separate window where you are able to zoom in and out. I would like to keep that functionality while also being able to return to the reference point in the text where the user was before linking to the image.

Jellby · 05-10-2013, 12:03 PM

You'd have to add an explicit "link back" or, better yet, rely on readers having a proper "back" function.

mrmikel · 05-11-2013, 07:24 AM

My PRS-300 doesn't have a back button, so please provide a link back.

Toxaris · 05-11-2013, 09:47 AM

Strange, my PRS-300 has a back button...

mrmikel · 05-11-2013, 05:49 PM

It has a back button but it doesn't return to a location within the epub. It jumps you out of the epub and up to the start screen of the book or to the toc.

Toxaris · 05-12-2013, 02:39 AM

Ah, that might be. To be honest I never used it.

05-09-2013, 05:37 PM	#1
EbookNoob Junior Member Posts: 9 Karma: 10 Join Date: May 2013 Device: all	Linking to an image Does anyone know how to link to images that are placed throughout the chapters of the book. I had no problem linking to references, endnotes, and chapter headers. On the Ipad the links brought up the images in a separate window which was fine. On the Nook simple touch and the hd+ the links did not work at all. Also, when converted to .mobi the links did not work on the kindle fire. Does anyone have any tips on how to link directly to the image either on the actual page where it is located or in another window. An example of the code I am using is: By doing so, we can know the effects of modifying the meplat on the BC of the 168 grain VLD. Figures <a href="../Images/ABDOC_109_1_7mmPart1p5.jpg"><b>5</b></a> and <a href="../Images/ABDOC_109_1_7mmPart1P6.jpg"><b>6</b></a> show the results of the BC testing.</p> The code for one of the images is: <div class="image"><img alt="ABDOC_109_1_7mmPart1p5" src="../Images/ABDOC_109_1_7mmPart1p5.jpg" /></div>

05-09-2013, 06:27 PM	#2
DomesticExtremis Addict Posts: 243 Karma: 359054 Join Date: Nov 2012 Device: default	You need to use the <a> tag with 'id' attribute. if you want to make sure it doesn't open in a new window, use target=_self So if you have somefile.xhtml: Code: <div class="image"><img alt="ABDOC_109_1_7mmPart1p5" src="../Images/ABDOC_109_1_7mmPart1p5.jpg" ><aid="someid"></a></img></div> and in someotherfile.xhtml Code: ... <p>By doing so, we can know the effects of modifying the meplat on the BC of the 168 grain VLD. Figures <a href="somefile.xhtml#someid" target="_self"><b>5</b></a> and...</p> ... Last edited by DomesticExtremis; 05-09-2013 at 06:29 PM.

05-10-2013, 03:32 AM	#4
Jellby frumious Bandersnatch Posts: 7,516 Karma: 18512745 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	You don't need to add an <a> element as anchor, you can simply add an ""id" attribute: Code: <div class="image" id="someid"><img alt="" src="..." /></div> and then use <a href="..."> as normal. PS. Do not add some meaningless text in the "alt" attribute. The alt attribute is intended to be shown/read when the image is not displayed. It should be something descriptive if the image is something important, but if it's just a decorative image it's better left blank.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
linking to gtk	chris_c	Kindle Developer's Corner	7	08-25-2012 09:19 AM
linking between books?	xmlgirl	ePub	8	05-19-2012 04:23 PM
anyway of linking Mobipocket	ratt1972	Calibre	4	07-09-2010 10:48 PM
What are you linking?	gvtexas	Lounge	14	02-29-2004 12:11 AM

05-10-2013, 01:09 AM	#3
Turtle91 A Hairy Wizard Posts: 3,102 Karma: 18727053 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	Use of the "target" attribute MAY not validate properly. It SHOULD default to self if used in a reader/app, but on a PC it depends on the browser settings.

05-10-2013, 11:03 AM	#5
EbookNoob Junior Member Posts: 9 Karma: 10 Join Date: May 2013 Device: all	Thanks for the help everyone! Does anyone have a good idea on how to link back from the image to the reference in the text. On the newer readers if you click the image it opens up in a separate window where you are able to zoom in and out. I would like to keep that functionality while also being able to return to the reference point in the text where the user was before linking to the image.

05-10-2013, 12:03 PM	#6
Jellby frumious Bandersnatch Posts: 7,516 Karma: 18512745 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	You'd have to add an explicit "link back" or, better yet, rely on readers having a proper "back" function.

05-11-2013, 07:24 AM	#7
mrmikel Color me gone Posts: 2,089 Karma: 1445295 Join Date: Apr 2008 Location: Central Oregon Coast Device: PRS-300	My PRS-300 doesn't have a back button, so please provide a link back.

05-11-2013, 09:47 AM	#8
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	Strange, my PRS-300 has a back button...

05-11-2013, 05:49 PM	#9
mrmikel Color me gone Posts: 2,089 Karma: 1445295 Join Date: Apr 2008 Location: Central Oregon Coast Device: PRS-300	It has a back button but it doesn't return to a location within the epub. It jumps you out of the epub and up to the start screen of the book or to the toc.

05-12-2013, 02:39 AM	#10
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	Ah, that might be. To be honest I never used it.

Advert

Advert