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 formatting a simple
      in columns and bolding the first item on its own line

    How to make background image with aspect ratio in html and css [closed]

    How to make a background header image extend to full width of browser

    TW Bootstrap: How to overflow columns

    How to get CSS background images to show up in HTML files opened by Word?

    How to apply custom css class to extjs grid column, and remove it with delay?

    CSS: show only the last x items in a list

    how to make content to be fixed inside scroll div using only css?

    How to make a div fade on hover?

    How to position nav element center under parent div?

    HTML/CSS: How to resize checkboxes (without overlapping)

    CSS: How to prevent Background colour to be overwritten by colour from less-file

    How to fix inconsistent rendering of adjacent TD borders when they are collapsed?

    How to make rollover images in CSS using multiple image backgrounds and :hover pseudo

    PHP: How to style session output [closed]

    CSS: How to define a centered div with endless vertical borders and an initial height of 100%?

    How to give style to iframed page content using parent pages css?

    How make something like Facebook Notifications?

    How to pass a local file name to css-validator.jar?

    How to change CSS to the same class but another input name

    How to make a div a link as it transitions in CSS

    @media query device - how to portrait one css, landscape other?

    How to vertically align absolutely positioned images on top of one another?

    How to fixed
    in the specific location in css

    How do I make my background-color fill entire width of div when applied to a `ul li`?

    CSS - How to target Second Child List Items?

    How to find dependand JS and CSS

    Is it possible to apply css transitions on svg nodes? If yes, how?

    How do I fix this simple CSS floating issue in IE?

    How to extend Navigation in CSS