- This topic is empty.
-
AuthorPosts
-
February 26, 2013 at 8:46 am #42985SirGabrielMember
Jambo!
I’m trying to create a grid of images; When you mouse over an image, text displays in a stationary Div.
Anybody know how to do this?
Here’s an example done in Flash: http://jasmine-star.com/#/life-in-the-in-between/
February 26, 2013 at 9:02 am #126127Paulie_DMemberSounds like a job for java script. Or rather jQuery
February 26, 2013 at 9:21 am #126129February 26, 2013 at 9:29 am #126130Paulie_DMemberI haven’t reviewed the linked article as it doesn’t render well on my phone but from a cursory reading of the OP it sounds like the div will be populated with information on the hovered image BUT the div will have no relationship to the image.
Hence, JS.
February 26, 2013 at 9:36 am #126131Andy HowellsParticipantCan possibly do it without JS. Will create a codepen.
February 26, 2013 at 9:56 am #126132Andy HowellsParticipantYup it’s possible, though the text wouldn’t be easily editable if this is to run via a CMS, you’d have to change the text in the CSS stylesheet instead.
February 26, 2013 at 10:04 am #126134Paulie_DMemberIf you have an image with an ‘alt’ or ‘title’ attribute it shouldn’t be had to populate that attribute text into text in a div….should it?
Of course, my jQ skills are minimal but I’m sure I’ve seen it done.
February 26, 2013 at 10:08 am #126137Paulie_DMemberUgh….hacky indeed. :)
As I said…JS is the way. Each image will have it’s own set attributes…it’s just a matter of grabbing them and sticking them/it in as text into another place.
February 26, 2013 at 10:15 am #126138Kitty GiraudelParticipantQuick and dirty jQuery way: http://codepen.io/HugoGiraudel/pen/bb6e39736f9bd4d04641f9c942672380
February 26, 2013 at 10:17 am #126139Andy HowellsParticipantUsing JQ – http://codepen.io/andyunleashed/pen/etczA
Actually @hugogiraudel’s is much better.February 26, 2013 at 10:58 am #126144Paulie_DMember@HugoGiraudel I like that…copied for future reference.
February 26, 2013 at 12:05 pm #126164February 26, 2013 at 12:11 pm #126166Paulie_DMemberI love solutions that don’t rely on JS/JQ but in practical terms your solution does mean having to update the text for each image if it were replaced.
Applying an ‘alt’ tag is something that should be done to the vast majority of images by default (that aren’t styling) so the JS solution would seem to be optimal.
Is your way more work or less?…I’m not sure TBH.
February 26, 2013 at 12:28 pm #126171wolfcry911ParticipantTo be fair the OP doesn’t give much detail except for the example link. There’s no information on how the image and text are related. If the text did not describe the image, I personally would not put it in the alt attribute. I’m not discrediting the JS methods (I have a similar pen), rather I’m giving the OP another option using html/css that mimics his flash example.
For the record, if an image were replaced you’d be changing the alt text anyway…
edit// anyone else finding lorempixel wonky today?
February 26, 2013 at 12:35 pm #126177SirGabrielMember**Wow**. You guys are awesome! Looks like I now have a number of working solutions to choose from…
I’ll be trying this out tonight after work.
_THANK YOU_
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.