CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Greg Ostry
Greg Ostry

Reputation: 1231

How to select previous element in jquery?

i have an image and i would like to assign which element of the area is clickable. enter image description here

The red stripe shouldn't be clickable.

My HTML solution:

<img src="" data-highres="" usemap="#img"> 
<map name="img">
   <area class="show-modal" shape="rect" cords="" href="">
</map>

So when i click on the white area it should show me a modal window with "this" image.

my jquery solution:

$('.show-modal').on('click', function(e){
            e.preventDefault();
            var highres = $('').attr("data-highres");
            $('.modal').css('display', 'block');
            $('#modal-image').attr('src', highres);
        });

When i click on the image(white area) it sould show me a high resulation image in a modal window.

I left the $("") selector empty because i don't know how to select the img attribute -> data-highres=""

I tried with the previous selector but it didn't work.

Upvotes: 1

Views: 13709

Answers (5)

Greg Ostry
Greg Ostry

Reputation: 1231

<html>
<head>
    <title></title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
<img  src="pages/dn/low/dn-02.jpg" data-highres="pages/dn/high/dn-02.jpg" usemap="#image">
<map name="image">
    <area class="show-modal" shape="rect" coords="1,1,725,1094" alt="clickable">
</map>
<br>
<img  src="pages/dn/low/dn-03.jpg" data-highres="pages/dn/high/dn-03.jpg" usemap="#image">
<map name="image">
    <area class="show-modal" shape="rect" coords="1,1,725,1094" alt="clickable">
</map>
<script>
    $('.show-modal').on('click', function(){
        var $this = $(this).parent('map').prev('img').attr('data-highres');
        alert($this);
    });
</script>
</body>
</html>

here is simple code. i get all the time the same attr. ->data-highres="pages/dn/high/dn-02.jpg"

Upvotes: 0

Madhavi Krishnayya
Madhavi Krishnayya

Reputation: 39

Refer the element by DOM traversal: 

    $('.show-modal').on('click', function(e){//called when the element with show.modal class is clicked
    alert("map area clicked");
    });

    $('.show-modal').parent().prev().on('click', function (e) {//called when the element before the map area element is clicked
    alert("previous element of map area is clicked");
    });

The later one works for all types of element tags. If you want it to be specific to image types, specify the element type in prev(). i.e.,

    $('.show-modal').parent().prev('img').on('click', function (e) {//called when the element before the map area element is clicked
    alert("Image is clicked");
    });

Upvotes: 0

Konstantinos
Konstantinos

Reputation: 973

Just add a class to your image like this: 

<img src="" data-highres="Hello" class="imgCLASS" usemap="#img">

and then make this: 

var highres = $('.imgCLASS').attr("data-highres");
alert(highres); // Hello

https://jsfiddle.net/myrma60b/1/

Upvotes: 0

dekts
dekts

Reputation: 830

You can use below code, modify as per your requirements.

var getData = $('#imgID').data("highres");
console.log(getData);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="url/to/your/image.jpg" id="imgID" data-highres="high" alt="image_name" usemap="#Map" />
<div name="Map" id="Map">
    
</div>

Upvotes: 1

Terry
Terry

Reputation: 66218

Actually you have to do the following operations of DOM traversal to get what you need:

  1. Select the parent node of the <area> element, which is <map>. This can be done either using $(this).closest('map') or $(this).parent('map').
  2. Select the image sibling, which is by chaining .prev('img') to the selector above

Therefore, something like this should work:

$('.show-modal').on('click', function(e){
    e.preventDefault();
    var highres = $(this).closest('map').prev('img').attr('data-highres');
    $('.modal').css('display', 'block');
    $('#modal-image').attr('src', highres);
});

Upvotes: 3

Related Questions