Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 28

Thread: CSS & Mouseover

  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS & Mouseover

    I am trying to figure out how to do something and so far have only found ugly workarounds that don't seem to do precisely what I want.

    Here's what I want: My site displays people's names who have birthdays on a given day. I have displayed their picture at the top of the page and a note saying they are pictured. What I want is to highlight the word "Pictured" and when they hover over the word, a picture of the person pops up to the right of the word "Pictured".

    How do I do this effectively?

  • #2
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts
    to highlight
    Code:
    #picture {
    background: #e5ef95;
    }
    to hover
    Code:
    #picture a:hover {
    background-image: url('image.png');
    background-repeat: no-repeat;
    background-position: center right;
    }
    You'll definitely have to give the a:hover either a margin or padding right.

  • #3
    New Coder
    Join Date
    Mar 2012
    Location
    Tulsa, OK
    Posts
    31
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Code:
    <p>(Pictured)</p>
    <div class="hover_box">
    <img src> and other stuff....
    </div>
    </p>
    Code:
    p div.hover_box {
    visibility: hidden;
    }
    
    p:hover div.hover_box {
    visibility: visible;
    }
    That's how I would attack this. Or the general idea of it anyway. You can build flyout menus like this as well.

  • #4
    New Coder
    Join Date
    Mar 2012
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The second option is more along the lines of what I'm looking for. Since I'll have multiple images in a single post (I'm using Wordpress for the core of the site) to attach to various tags, the first option won't really work as I'd have to load every single image into css and give each tag a different name.

  • #5
    New Coder
    Join Date
    Mar 2012
    Location
    Tulsa, OK
    Posts
    31
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by OscarGuy View Post
    The second option is more along the lines of what I'm looking for. Since I'll have multiple images in a single post (I'm using Wordpress for the core of the site) to attach to various tags, the first option won't really work as I'd have to load every single image into css and give each tag a different name.
    Good luck. If you have any questions... I'll be here.

  • #6
    New Coder
    Join Date
    Mar 2012
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok. Is there a way to make the word "Pictured" the part that you mouse over to view? Or will this do that? The code looks like it might add a second line that has no definition.

  • #7
    New Coder
    Join Date
    Mar 2012
    Location
    Tulsa, OK
    Posts
    31
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by OscarGuy View Post
    Ok. Is there a way to make the word "Pictured" the part that you mouse over to view? Or will this do that? The code looks like it might add a second line that has no definition.
    That's how it is set up to do... I'd add a class to the paragraph though... just so you can be more exact if needed.
    It is set so p:hover is the selector and div.hover_box is the item that is styled.

    Also, you can swap the visibility part for "display: none" and "display: block" if needed as well.

  • #8
    New Coder
    Join Date
    Mar 2012
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sadly, I can't get it to work as written. I have the word Pictured on the same line with other text. If I wrap Pictured with a paragraphs, it dumps it to a second line, which isn't what I was wanting. Is there any way to do this with span tags around the word/image?

  • #9
    New Coder
    Join Date
    Mar 2012
    Location
    Tulsa, OK
    Posts
    31
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by OscarGuy View Post
    Sadly, I can't get it to work as written. I have the word Pictured on the same line with other text. If I wrap Pictured with a paragraphs, it dumps it to a second line, which isn't what I was wanting. Is there any way to do this with span tags around the word/image?
    Yes, put span around the word. That will prevent that.

  • #10
    New Coder
    Join Date
    Mar 2012
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    but I tried to change it to span from p, but it didn't work, so now it's completely jumbled.

  • #11
    New Coder
    Join Date
    Mar 2012
    Location
    Tulsa, OK
    Posts
    31
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by OscarGuy View Post
    but I tried to change it to span from p, but it didn't work, so now it's completely jumbled.
    Sorry. I made some code for you. It is slightly messier than I had hoped... apparently divs in paragraphs don't play nice.

    Code:
    <html>
    <head>
    
    <style type="text/css">
    span.wrapper span.trigger {
    	position: relative;
    }
    
    span.wrapper span.trigger div {
    	background: #ff0000;
    	display: none;
    	width: 150px;
    	position: absolute;
    	top: 10px;
    }
    
    span.wrapper span.trigger:hover div {
    	display: block;
    }
    </style>
    
    </head>
    
    <body>
    <span class="wrapper">This is a length of text with a
    <span class="trigger">hover command
    
    <div class="hover_block">
    <h1>Hello.</h1>
    <p>Lorem Ipsum Delor Sit Amet</p>
    </div>
    
    </span>
    in the middle of it.
    </span>
    
    </body>
    </html>

  • #12
    New Coder
    Join Date
    Jan 2012
    Posts
    97
    Thanks
    1
    Thanked 13 Times in 13 Posts
    Here dude, you need to use some javascript. Create a blank image called blank.png or whatever you want to call it, put it in your image folder. Then when you hover over "Pictured" it will call the swap image function. Obviously put the image src you want swapped in there. Then on MouseOut it will put the blank image back. If you have a huge database of users you are going to have to build an array or constructor and use some conditional statements so it knows what picture to grab etc... blah blah

    Also, you obviously are going to have to customize all this yourself unless you show us your code.

    Here i put a live preview up on my site for you. Click here

    Code:
    <html>
    <head>
    <title></title>
    <style type="text/css">
    #container{
    	width: 1000px;
    	margin: auto;
    }
    
    #pictured{
    	text-decoration: none;
    }
    
    #pictured:hover {
    	text-decoration: underline;
    }
    
    #hidden-image-span{
    	margin-left: 100px;
    }
    </style>
    <script type="text/javascript" >
    
    function swapImage(){
        var elem = document.getElementById("hidden-image");  
        elem.src = "images/business-woman.jpg";
        elem.style.width = "299px";
        elem.style.height = "450px";
    }
    
    function clearImage(){
        var elem = document.getElementById("hidden-image");  
        elem.src = "images/blank.png";
    }
    
    </script>
    </head>
    <body>
    
    <div id="container">
    	<div id="picturedDiv" >
    		<a href="#" id="pictured" onMouseOver="swapImage()" onMouseOut="clearImage()">Pictured</a>
    	</div>
    	<span id="hidden-image-span">
    		<img src="images/blank.png" id="hidden-image" style="width:0px; height:0px"/>
    	</span>
    </div>
    
    </body>
    </html>

  • #13
    New Coder
    Join Date
    Mar 2012
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    [QUOTE=telekovar;1200638]Sorry. I made some code for you. It is slightly messier than I had hoped... apparently divs in paragraphs don't play nice.

    No worries. I seldom use divs or paragraphs. I use span and since it's word press, I don't have to use paragraph tags.

  • #14
    New Coder
    Join Date
    Mar 2012
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by telekovar View Post
    Sorry. I made some code for you. It is slightly messier than I had hoped... apparently divs in paragraphs don't play nice.
    Ok. That still wouldn't work, so I'm not sure if I'm doing it wrong. Here's what the line of code looks like I'm adding the span to:

    Code:
    <h4><font color="#990066">1911:</font> Edmund H. North (79 at death) [<strong><font color="#660099">Pictured</font></strong>]</h4>
    I want when someone hovers over the word [Pictured] for it to show a picture out to the right. The image I'm wanting to use is:

    Code:
    <img src="http://www.cinemasight.com/wp-content/uploads/2012/03/EdmundHNorth.jpg" alt="" title="EdmundHNorth" width="76" height="100" />
    With your code, I changed everything as I thought I needed to on that line to this:

    Code:
    <h4><font color="#990066">1911:</font> Edmund H. North (79 at death) <span class="ThisDay"><span class="ThisDayPic">[<strong><font color="#660099">Pictured</font><div class="ThisDayPic"><img src="http://www.cinemasight.com/wp-content/uploads/2012/03/EdmundHNorth.jpg" alt="" title="EdmundHNorth" width="76" height="100" /></div></span></span></strong>]</h4>
    It doesn't work. So, I may be doing something wrong, but it also needs to be known that I put multiples of these on a single page, so that needs to be part of the functionality.

  • #15
    New Coder
    Join Date
    Jan 2012
    Posts
    97
    Thanks
    1
    Thanked 13 Times in 13 Posts
    You need to read my post. Idk if u missed it or what but just click on the live demo tell me if that's what u mean.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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