How to design a grid(like a chessboard) of pictures in html with a property that the content of an individual cell covers the entire grid on onmouseover and again it comes back to its place i.e the cell on onmouseout?
emperor.jk
0
Newbie Poster
JorgeM
958
Problem Solver
Team Colleague
Featured Poster
I think one way is to have an extra image displayed as none. On mouseover, execute a function to display the image, but update its source of that image you just finished mousing over.
I have a simliar example you can look at. The difference here is the position of the bigger image. You want it to cover the grid rather than off to the side.
Simple JavaScript Image Thumbnail Viewer
If you hover over the thumnail, the larger image's src is updated to that of the image you hovered over.
This can also be done without javascript, using CSS. It can also be done via the jQuery library.
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.