1

I'm working on a plant identification site where we want people to be able to easily locate a specific plant in a photo. Each plant in the photo area is contained in a div, and I'd like to make an arrow (like in the image here: http://www.plantiferate.com/ArrowExample2.jpg) which goes from a point in the right plant list (the left edge/vertical middle of the text "Autumn Blaze Pear") to the right edge/vertical middle of a div located over the area of the red pear tree in the photo.

Here's a simplified version of what I've got right now, without the arrow. Any ideas how to accomplish something like this using CSS and/or JQuery? Thanks!

<div class="photoareacontainer">

<div class="photoarea">
    <img src="URL" class="photobackground" width="800" height="600" />
    <div class="highlight-region" ID="autumnblazepearphoto" 
        style="top:400px;left:200px; width:300px; height:#300px;" title="Autumn Blaze Callery Pear: ..."></div>
    <div class="highlight-region" ID="weepingwillowphoto" 
        style="top:350px;left:500px; width:300px; height:#300px;" title="Weeping Willow: ..."></div>
</div>

<div class="photocontentsarea">
    <a href="#">Autumn Blaze Pear</a><br />
    <a href="#">Weeping Willow</a><br />
</div>

David Laberge
  • 15,435
  • 14
  • 53
  • 83
Chris C.
  • 33
  • 4

2 Answers2

1

I used a font-awesome arrow for my demo see here https://jsfiddle.net/DIRTY_SMITH/y3v9n0b8/

.fa-long-arrow-left{font-size: 40px; margin: 100px;}

.fa-long-arrow-left {

/* Safari */
-webkit-transform: rotate(-45deg);

/* Firefox */
-moz-transform: rotate(-45deg);

/* IE */
-ms-transform: rotate(-45deg);

/* Opera */
-o-transform: rotate(-45deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}
Adam Buchanan Smith
  • 9,422
  • 5
  • 19
  • 39
1

Fiddle with canvas I overlayed a canvas between the links and the images, and there's a function that calculates the coordinates of the link and the image, and draws an arrow in between them when you click on it.

$(document).on('click','a',function(){ var c = document.getElementById("arrows"); var ctx = c.getContext("2d"); var start = arrowcoords(this); var end = arrowcoords(document.getElementById($(this).html())); canvas_arrow(ctx,start.left,start.top,end.left,end.top); });

With arrowcoords being based on jqueries position and width/height

function arrowcoords(el){
   var position = $(el).position();
   position.left+=$(el).width()/2;
   position.top+=$(el).height()/2;
   return position;
}

And the arrow taken from Stack overflow about drawing arrow on canvas

Community
  • 1
  • 1
DrunkWolf
  • 994
  • 1
  • 6
  • 18