SitePoint Sponsor

User Tag List

Results 1 to 15 of 15

Hybrid View

  1. #1
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Taunton, UK
    Posts
    787
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Rollover div to replace with another div

    I am working on a site design that consists of a grid of 6 divs (2 rows of 3)

    Each div has an image filling the entire div plus some live text. The image and text needs to be dynamic as it changes regularly via cms updates. This also applies to the rollover content.

    I want to implement a rollover on each div so that different content is displayed when the mouse rolls over each div and it reverts back to the original when mouse leaves div.

    Sounds quite straightforward but I am struggling to find a solution

    I tried with JavaScript and setting to display none and display block but this resulted in a flickering loop. Using visibility didn't work either.

    Ideally the solution will work in ie7 but ie8 would probably be acceptable to client as a minimum.

    Really appreciate any help on this.

    Thanks
    Mediakitchen Limited
    App Development | Website Design & Development | Flash Game Development
    Somerset, UK
    http://www.mediakitchen.co.uk

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,119
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    You can do this with CSS alone, but it can cause accessibility problems, as hovering doesn't work on mobile devices. So firstly plan out how this will play out on various devices:

    - devices that don't have hover will need another way to access the text. Either it should be visible all the time, or available with a click (but how is someone going to know to click?)
    - if you use JavaScript, how will the content be available if JS is turned off?
    - will users on assistive devices like screen readers be able to access the content?

    If all these issues provide too many challenges, it probably means that the idea is not a good one in the first place.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Taunton, UK
    Posts
    787
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the swift reply Ralph. The client has specified they are not concerned about this site working on mobile devices. Would the pure CSS solution work on IE7/IE8?

    Would the CSS solution involve using hover? If so, woulld you give me an example please. I did try this by laying out the 2 separate divs inside a container div for each of the 6 grid positions and setting the value of top to minus the height of the div but whilst it did move up the content of the 2 nested divs, both were visible.
    Mediakitchen Limited
    App Development | Website Design & Development | Flash Game Development
    Somerset, UK
    http://www.mediakitchen.co.uk

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,119
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Here is a simple way to do it, though there are many other ways:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .class1{
    	width: 300px; min-height: 300px;
    	display: inline-block; margin: 0 20px 20px 0;
    	position: relative;
    	z-index: 1;
    	background: #e7e7e7;
    }
    .class1 span {
    	position: absolute; 
    	left: -9999px;
    	bottom: 0;
    }
    .class1:hover span {
    	z-index: 2;
    	display: block;
    	width: 260px;
    	left: 0;
    	padding: 0 20px 20px;
    	font-size: 1.5em;
    	font-style: italic;
    	font-family: georgia, serif;
    	text-shadow: 0 1px white;
    }
    
    </style>
    </head>
    
    <body>
    
    <div class="class1"><span>This is some text relating to the image that appears on hover</span></div>
    <div class="class1"><span>This is some text relating to the image that appears on hover</span></div>
    <div class="class1"><span>This is some text relating to the image that appears on hover</span></div>
    <div class="class1"><span>This is some text relating to the image that appears on hover</span></div>
    
    </body>
    </html>
    Should work in IE7 and 8, but test it out to make sure. In IE7 you can't use display: inline-block, but for that browser you could use display: inline instead, or just float the divs instead.

    In reality, I wouldn't set a height on the divs unless perhaps the images are always going to be the same size.


    Quote Originally Posted by chuckylefrek View Post
    The client has specified they are not concerned about this site working on mobile devices.
    Heh heh. To me, that's like a client saying they don't mind if their house is not built to safety standards. I just don't accept such arguments.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Taunton, UK
    Posts
    787
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much Ralph. I will give this a go now. Haha yes I agree to the clients decision about mobiles is ludicrous considering they are so concerned about it working for IE7. They had initially asked for it to be done in Flash but I told them I was able to do it in html - haha welll I thought I was able to do it
    Mediakitchen Limited
    App Development | Website Design & Development | Flash Game Development
    Somerset, UK
    http://www.mediakitchen.co.uk

  6. #6
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Chucky,

    A rough guess of mine would be for you to have .class1 (the original content) and .class1:hover (the replacing content), giving .class1 a z-index of 1 and .class1:hover a z-index of 2.

    I've been trying this, but I can't quite get it. Here's the non-working code I have so far:
    Code:
    <html>
    <head>
    <style>
    .class1{
    	z-index: 1;
    }
    .class1:hover span {
    	z-index: 2;
    }
    
    </style>
    </head>
    
    <body>
    
    <div class="class1">hello<span>world</span></div>
    
    </body>
    </html>
    Edit: OOPS! I started this reply before Ralph posted, so I didn't see his answer before posting.

  7. #7
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Taunton, UK
    Posts
    787
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Pam - I will let you know how I get on with Ralph's solution.
    Mediakitchen Limited
    App Development | Website Design & Development | Flash Game Development
    Somerset, UK
    http://www.mediakitchen.co.uk

  8. #8
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Taunton, UK
    Posts
    787
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Made a few amends to get my text in as well as an image. You can see the test file here http://mediakitchen.co.uk/index.php/test2

    Does this seem a viable solution?

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    
    
    html {
    
    	margin:0;
    	padding:0;
    
    }
    
    
    body {
    
    	margin:0;
    	padding:0;
    }
    
    img {
    
    	margin:0;
    	padding:0;
    
    }
    
    .class1Container {
    
    	float: left;
    
    	margin:0;
    	padding:0;
    
    	width: 300px;
    	height: 300px;
    	background:red;
    
    	position: relative;
    
    
    }
    
    
    .class1Image {
    
    
    	float: left;
    
    }
    
    
    .class1Text {
    
    	position: absolute; 
       	top: 20px; 
       	left: 20px; 
      
    
    
    }
    
    
    .class1{
    	margin:0;
    	padding:0;
    
    	width: 300px; min-height: 300px;
    	
    	float:left;
    	z-index: 1;
    	background: #e7e7e7;
    	text-align:left;
    }
    
    
    
    .class1Container span {
    	position: absolute; 
    	left: -9999px;
    	top: 0;
    }
    .class1Container:hover span {
    
    	margin:0;
    	padding:0;
    	z-index: 2;
    	display: block;
    	width: 300px;
    	height: 300px;
    	left:0;
    	
    	
    	
    	
    }
    
    </style>
    </head>
    
    <body>
    
    <div class="class1Container"><div class="class1Image"><img src="/images/bird.jpg" /></div><div class="class1Text">Test</div><span><img src="/images/birdInverted.jpg" /></span></div>
    <div class="class1Container"><div class="class1Image"><img src="/images/bird.jpg" /></div><div class="class1Text">Test</div><span><img src="/images/birdInverted.jpg" /></span></div>
    <div class="class1Container"><div class="class1Image"><img src="/images/bird.jpg" /></div><div class="class1Text">Test</div><span><img src="/images/birdInverted.jpg" /></span></div>
    <div class="class1Container"><div class="class1Image"><img src="/images/bird.jpg" /></div><div class="class1Text">Test</div><span><img src="/images/birdInverted.jpg" /></span></div>
    
    </body>
    </html>
    Mediakitchen Limited
    App Development | Website Design & Development | Flash Game Development
    Somerset, UK
    http://www.mediakitchen.co.uk

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,119
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Seems to work OK to me.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  10. #10
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Ralph? anybody?

    What is the advantage of sliding the images offscreen? Is it a browser compatibility thing or just another technique?

    I did the same thing with z-index and visibility and they seem OK. Just wondering.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    
    html {
        margin:0;
        padding:0;
    }
    body {
        margin:0;
        padding:0;
    }
    .birdcage {
        background:#f00;
        float:left;
        position:relative;
        width:300px;
        height:300px;
    }
    .top {
        position:absolute;
        top:0;
        left:0;
    }
    .birdcage:hover .top {
    /*    z-index:-1;           /* use this */
        visibility:hidden;    /*  or this */
    /*    left:-9999px;         /*  or this */
    }
    .text {
        color:#fff;
        position:absolute; 
        top:20px;
        left:20px;
    }
    
    </style>
    </head>
    <body>
    
    <div class="birdcage">
        <img src="http://mediakitchen.co.uk/images/birdInverted.jpg" />
        <div class="text">Test</div>
        <img class="top" src="http://mediakitchen.co.uk/images/bird.jpg" />
    </div>
    <div class="birdcage">
        <img src="http://mediakitchen.co.uk/images/birdInverted-.jpg" />
        <div class="text">Test</div>
        <img class="top" src="http://mediakitchen.co.uk/images/bird.jpg" />
    </div>
    <div class="birdcage">
        <img src="http://mediakitchen.co.uk/images/birdInverted.jpg" />
        <div class="text">Test</div>
        <img class="top" src="http://mediakitchen.co.uk/images/bird-.jpg" />
    </div>
    <div class="birdcage">
        <img src="http://mediakitchen.co.uk/images/birdInverted-.jpg" />
        <div class="text">Test</div>
        <img class="top" src="http://mediakitchen.co.uk/images/bird-.jpg" />
    </div>
    
    </body>
    </html>
    (issues with :hover and portable devices notwithstanding) Thanks.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by chuckylefrek View Post
    Made a few amends to get my text in as well as an image. You can see the test file here http://mediakitchen.co.uk/index.php/test2

    Does this seem a viable solution?
    Is the rollover image going to be a different image or just a highlighted version of the original image? If it's just an effect using an image of the same size then it would be better in the background rather than in an html element and would keep the code tidier. If it's a new image that is important to the content then having it in the html is fine. Of course you may be tied to a cms inserting both into the html so may have little choice in cleaning things up.

    Ronpat's code above is tidier as it removes all the redundant classes and tidies up the html. If as I mentioned the rollover is just for effect then I would put the second image in the background of the main div instead.

    Quote Originally Posted by ronpat
    I have a feeling the web is full of "accessibility" resources. Can you recommend a favorite for a beginner?
    You can start at the source and find plenty of appropriate links from there:

    http://www.w3.org/WAI/intro/accessibility.php
    http://www.w3.org/standards/webdesign/accessibility
    Last edited by Paul O'B; Sep 24, 2012 at 03:32.

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,119
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •