How to make a grid of interactive elements?


Tags: javascript,jquery,html,css,grid

Problem :

I'm trying to create a portfolio website that resembles this, a full-page grid of images that change when you hover over them... (another example, the third screen!)

And currently I have a crude solution that looks like:

<img src="1.png" id="img" swap="2.png"/>

// then in JS...

$("#img").hover(function(){
    var _this = $(this);
    var current = _this.attr("src");
    var swap = _this.attr("swap");
    _this.attr('src',swap).attr('swap',current); 
}); // 

code credit

But this isn't a very scaleable solution and other than having 1000 images, each with their own unique ID which is identified so the src can be toggled, I'm not sure what to do -- plus I don't know how this would react to different display sizes/screen cut-offs. And while background-image in CSS tiles nicely, it doesn't allow interactivity... unless maybe you had a JS script track cursor position(?)

!! This is my very first project, any help would be appreciated :) (Codecademy is a very sheltered learning environment........)



Solution :

you don't have to use ids and create a handler for every image.

this will apply to every image CURRENTLY on the page:

$("img").hover(function(){
  var _this = $(this);
  var current = _this.attr("src");
  var swap = _this.attr("swap");
  _this.attr('src',swap).attr('swap',current); 
});

and this will react to every image, even images added after the page is loaded:

$(document).on('hover', 'img', function () {
  var _this = $(this);
  var current = _this.attr("src");
  var swap = _this.attr("swap");
  _this.attr('src',swap).attr('swap',current); 
});

To account for screen sizes and your other concerns, you'd need to either set a fixed width and height on your images, or make sure all your images are of similar resolution.

You could do this with backgrounds as well by creating a grid of divs then change the background of the div on hover, similar to the above handlers.


    CSS Howto..

    How to show blocks for progressbar using CSS

    How to notify view from model to change a value in backbone

    How to apply CSS directly to DOM TextNodes?

    How to apply picture for submit button

    How is margin-top and margin-bottom getting added

    Django-Bower + Foundation 5 + SASS, How to configure?

    CSS - How to deactivate the :hover pseudo class in IE 6

    How to reset margin-bottom to its default value

    How do I create a 3 nested stamina bar that will regenerate from last to first

    How to shade every other table row that spans across multiple rows?

    CSS / Jquery How to auto-size containers and images

    How to use global variables in CSS-Modules?

    How do I align div vertically like in picture

    How to match the last n children with CSS?

    How to add CSS to ASP.NET site with WebOptimization and Bundling

    How to bottom align a title of variable length

    How to align buttons properly in css/asp.net?

    CSS how to postiton div outside main container without it moving over the container on window re-size? [closed]

    Using only CSS, show div on hover over

    How to make tabs on the web page?

    How to make div fill the rest of viewport with keeping of aspect ratio (CSS or jQuery)?

    How to make my CSS transition smoother/work on different browsers?

    how to select all list items except for the first and last using CSS only?

    How to add a css class programmatically to a piece of code?

    How to use div to emulate border for