Adding 'click' event to image in a cell.

classic12

Hi guys,

I have the following working:

in the columns creation....
 { data : null,   orderable: false, width : '15%' , title : 'Click' , 'defaultContent': '<button id="emailDeal"  style="  color : red ; color: rgb(201, 191, 197) ;  border-radius: 5px ; width: 100px; height: 100px; background-color: transparent; border-width: 0.5px; border-color: white;" >Click to Email Deal </button> <button class="showDeal" style="  color : red ; color: rgb(201, 191, 197) ; margin-top: 10px ;  border-radius: 5px ; width: 100px; height: 100px; background-color: transparent; border-width: 0.5px; border-color: white;" >Click to Show Deal </button>'},
             { data: "quoteTitle" , title : "Title" , width : '35%'},
{
            data: "web_path",
            title : ' Info  ',
            width : '35%',
            class: 'showDeal',
            responsivePriority: 1,
            render: function(data, type, row)
              {
                   
                  //console.log(' web_path1 = '+ data );
            if (data !== undefined ){ 
                //console.log('data web_path1 = ' + data); 
                // var ext = data.substr(data.lastIndexOf('.') + 1);
                 var ext = data.toLowerCase().trim().substr(data.lastIndexOf('.') + 1);
                    if ( (ext === 'jpeg' ) || ( ext === 'jpg' ) || ( ext === 'jp2' ) || ( ext === 'png' )|| ( ext === 'gif' ) || ( ext === 'pdf' ))
                        {
                           // return '<img src=" ' + data + ' "' + imageSize + ' " style="margin: 5" class="info1"> </a>';
                            return '<img src=" ' + data + ' "' + imageSize + ' class="info1">';
                            // return '<a href > <img src=" ' + data + ' "' + imageSize + ' class="info1"></a>';
                           
                        }
 // now check if it is a video                     
                 if ( (ext === 'mp4')|| ( ext === 'mov' ))
                    {
                        
                          return ' <video width="320" height="240" controls>  <source src=" ' +data + ' " type="video/mp4">  <source src="movie.ogg" type="video/ogg">  Your browser does not support the video tag.   </video>'
                     }
 // last here so must be download                    
                    {
                          var fullPath = data.split('.')[0];
                          var filename = fullPath.replace(/^.*[\\\/]/, '');  
                          return ' Click to Download <br/> <a href=" '+ data + ' " target="_blank"  > '+ data +  " </a> ";
                }
             }   else { return '' };
                            }
                           
          } 


$('#dtDataChanged tbody').on( 'click', '.showDeal', function () {
// get the row details from dtDataChanged (var dealDetails ) array and poplate dtDealDeatails with the single row
//dealDetails
    
    var tr = $(this).closest('tr');    
        if ( $(tr).hasClass('child') ) {
        tr = $(tr).prev();  
    }
        var data2 = tableDataChanged.row( tr ).data();
        notesForEditor = data2['notes'];
        formDetails.show();

});

So when the button or image is clicked I get the details form to show. ( as they are in the 'showDeal' class )

When I hover over the button the cursor changes to 'click' how do I add this to the image.

cheers

Steve Warby

allan

Do you mean you want a hand pointer for the cursor when you hover the mouse over the image?

That isn't really a question for these forums - that would be better suited for StackOverflow since it is a generic CSS one.

Regardless use:

img.myClass {
  cursor: pointer;
}

The MDN documentation is an excellent resource for this sort of thing.