How to link a url in a javascript image

Question

I need to put a href in the image to link with a url, this would be done in the three images that contain the code below. When someone "click" on the image go to another page.

<div class="header_slider">    
<script src="{{skin url=''}}js/camera.js" type="text/javascript">
</script>
<script type="text/javascript">// <![CDATA[
  /* index slider */
  jQuery(function(){
    jQuery('#camera_wrap').camera({
      alignmen: 'topCenter',
      height: '32.882%',
      minHeight: '50px',
      loader : false,
      fx: 'simpleFade',
      navigationHover:false,
      thumbnails: false,
      playPause: false 
    });
  });
// ]]></script>
<div class="fluid_container">
  <div class="camera_wrap camera_orange_skin" id="camera_wrap">
    <div data-src="{{media url="wysiwyg/slideshow/banner1.png"}}">
      <div class="camera_caption fadeIn">
        <div class="right_slider_side sl_1"></div>
      </div>
    </div>
    <div  data-src="{{media 
url="wysiwyg/slideshow/OfertaCarrossel_Kits_0002.005.00020.jpg" }}">
      <div class="camera_caption fadeIn">
        <div class="right_slider_side sl_2"></div>
      </div>
    </div>
    <div  data-src="{{media     url="wysiwyg/slideshow/OfertaCarrossel_Sofa_0006.004.00021_FIN.jpg"}}">
      <div class="camera_caption fadeIn">
        <div class="right_slider_side sl_3"></div>
      </div>
    </div>
</div>
<div class="clear"></div>

Place onclick="window.location.href='https://stackoverflow.com/questions/47779222/how-to-link-a-url-in-a-javascrit-image'" in your divs that start like <div data-src... — pokeybit
– pokeybit, Commented Dec 12, 2017 at 18:33

walroar · Accepted Answer · 2017-12-12 18:43:50Z

2

You could add a class on each div with data-src tag and use JQuery on click event to redirect them to another page. Add another data tag to store the destination url.

For example on the HTML

<div class="clickMe" data-destination="http://www.google.com" data-src="{{media url="wysiwyg/slideshow/banner1.png"}}">

And your Javascript

$('.clickMe').on("click", function() {
  window.location.href = $(this).data('destination');
});

EDIT: Actually, the plugin that you use have the functionality built into it already. On your div add data-link attribute like below. Read through all of its functionality here https://www.pixedelic.com/plugins/camera/

<div  data-link="http://www.google.com" data-src="{{media url="wysiwyg/slideshow/banner1.png"}}">

answered Dec 12, 2017 at 18:43

walroar

829 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to link a url in a javascript image

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related