Moving image on click using Javascript?

Question

I have an image at the side of my website, i want to hide most of the image until the user clicks on it (its for a newsletter signup), what would be the best way of going about this?

I just need a section of this image showing, then whenever the user clicks on it the whole image pops out. I know i can use CSS to move the image about, what would the best javascript function to use instead of using the change image function as im only moving the image not changing it?

Example site where this is demonstrated: http://www.plus.de/

Check this post: [stackoverflow.com/questions/18741303/… [1]: stackoverflow.com/questions/18741303/… — Joris Lindhout
– Joris Lindhout, Commented Sep 11, 2013 at 14:01
You should provide more details if you want people to help you. — Jacob T. Nielsen
– Jacob T. Nielsen, Commented Sep 11, 2013 at 14:02
What @JorisLindhout said + you can't use an image to display a signup form, but you can use something like a div with a background image and a form inside it. — Shomz
– Shomz, Commented Sep 11, 2013 at 14:04

Milan and Friends · Accepted Answer · 2013-09-11 15:53:47Z

Here's a Fiddle

HTML

<div class="slide">
  <span class="text">OPEN</span>
</div>

CSS

#overflow {
  background: rgba(50,50,50,0.5);
  display: none;
  width: 100%;
  height: 100%;
}
.slide {
  background: #0296cc;
  position: absolute;
  top: 200px;
  left: -270px;
  width: 300px;
  height: 180px;
  z-index: 9999;
}
.text {
  display: block;
  width: 180px;
  margin: 80px 0 0 196px;
  font-family: Arial;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 3px;
  color: #fff;
  cursor: pointer;
  transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
}

jQuery

$(function() {

  $('.slide').click(function() {

    var overflow = ('<div id="overflow"><div>');

    $(this).stop().animate({ left: '0' }, 650);

    if($('#overflow').length < 1) {
       $('body').append(overflow);
    }

    $('#overflow').fadeIn('slow');

    $('#overflow').click(function() {

      $(this).fadeOut('slow') 
      $('.slide').stop().animate({ left: '-270px' }, 650);

    });

    // Prevents window scroll when overflow is visible
    $('#overflow').bind('mousewheel DOMMouseScroll', function(e) {
      var scrollTo = null;

      if (e.type == 'mousewheel') {
          scrollTo = (e.originalEvent.wheelDelta * -1);
      }
      else if (e.type == 'DOMMouseScroll') {
         scrollTo = 40 * e.originalEvent.detail;
      }

      if (scrollTo) {
         e.preventDefault();
         $(this).scrollTop(scrollTo + $(this).scrollTop());
      }
    });    


  });


});

Roko C. Buljan · Accepted Answer · 2013-09-11 14:08:50Z

0

BASIC DEMO

  <div id="gallery">

    <img src="images/img1.jpg" alt="" />
    <img src="images/img2.jpg" alt="" />
    <img src="images/img3.jpg" alt="" />
    <img src="images/img4.jpg" alt="" />

    <div id="tabs">
      <div>Tab 1</div>
      <div>Tab 2</div>
      <div>Tab 3</div>
      <div>Tab 4</div>     
    </div>

  </div>

CSS:

#gallery{
  position:relative;
  margin:0 auto;
  width:500px;
  height:200px;
  background:#eee;
}
#gallery > img{
  position:absolute;
  top:0;
  margin:0;
  vertical-align:middle;
}
#gallery > img + img{
  display:none;
}

#tabs{
  position:absolute;
  top:0px;
  right:0;
  height:200px;
  width:100px;
}

#tabs > div{
  cursor:pointer;
  height:49px;
  border-bottom:1px solid #ddd;
}

jQuery

$('#tabs > div').click(function(){

  var i = $(this).index();
  $('#gallery > img').stop().fadeTo(300,0).eq(i).fadeTo(500,1);

});

answered Sep 11, 2013 at 14:08

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

1 Comment

avrahamcool Over a year ago

he didnt ask for an image gallery.

Collectives™ on Stack Overflow

Moving image on click using Javascript?

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related