PDA

View Full Version : CSS & Mouseover



OscarGuy
Mar 4th, 2012, 12:03 AM
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?

stevenmw
Mar 4th, 2012, 12:15 AM
to highlight


#picture {
background: #e5ef95;
}
to hover


#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.

telekovar
Mar 4th, 2012, 02:07 AM
<p>(Pictured)</p>
<div class="hover_box">
<img src> and other stuff....
</div>
</p>




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.

OscarGuy
Mar 4th, 2012, 02:11 AM
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.

telekovar
Mar 4th, 2012, 02:49 AM
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.

OscarGuy
Mar 4th, 2012, 04:09 AM
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.

telekovar
Mar 4th, 2012, 04:25 AM
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.

OscarGuy
Mar 4th, 2012, 05:17 AM
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?

telekovar
Mar 4th, 2012, 05:35 AM
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.

OscarGuy
Mar 4th, 2012, 05:11 PM
but I tried to change it to span from p, but it didn't work, so now it's completely jumbled.

telekovar
Mar 4th, 2012, 11:00 PM
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.



<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>

sean3838
Mar 5th, 2012, 04:40 AM
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 (http://www.yourwowguides.com/HTMLPage1.htm)


<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>

OscarGuy
Mar 6th, 2012, 12:27 AM
[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.

OscarGuy
Mar 7th, 2012, 03:06 PM
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:



<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:



<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:



<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.

sean3838
Mar 7th, 2012, 03:27 PM
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.

telekovar
Mar 7th, 2012, 09:56 PM
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.

Well, you had the html right. Idk about the css, but this works for me.



<style type="text/css">
span.ThisDayPic div.ThisDayPic {
display: none;
}

span.ThisDayPic:hover div.ThisDayPic {
display: block;
}
</style>

<h4><font color="#990066">1911:</font> Edmund H. North (79 at death) <span class="ThisDay"><span class="ThisDayPic">[<strong><font color="#660099">Pictured</font></strong>]<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></h4>
<p>&nbsp;</p>

<h4><font color="#990066">1911:</font> Edmund H. North (79 at death) <span class="ThisDay"><span class="ThisDayPic">[<strong><font color="#660099">Pictured</font></strong>]<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></h4>
<p>&nbsp;</p>

<h4><font color="#990066">1911:</font> Edmund H. North (79 at death) <span class="ThisDay"><span class="ThisDayPic">[<strong><font color="#660099">Pictured</font></strong>]<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></h4>
<p>&nbsp;</p>

<h4><font color="#990066">1911:</font> Edmund H. North (79 at death) <span class="ThisDay"><span class="ThisDayPic">[<strong><font color="#660099">Pictured</font></strong>]<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></h4>
<p>&nbsp;</p>

<h4><font color="#990066">1911:</font> Edmund H. North (79 at death) <span class="ThisDay"><span class="ThisDayPic">[<strong><font color="#660099">Pictured</font></strong>]<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></h4>

OscarGuy
Mar 8th, 2012, 02:05 AM
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.

I'm sorry. I didn't read yours as I was wanting to do this entirely with css, not javascript. I need something I at least understand and can recode as needed. I know nothing about javascript.

OscarGuy
Mar 8th, 2012, 03:56 AM
Well, you had the html right. Idk about the css, but this works for me.





span.ThisDay span.ThisDayPic {position: relative;}
span.ThisDay span.ThisDayPic div {background: #ff0000;display: none;width: 150px;position: absolute;top: 10px;}
span.ThisDay span.ThisDayPic:hover div {display: block;}


those are the lines I entered in the css sheet. Did I mess something up in converting over?

OscarGuy
Mar 8th, 2012, 04:02 AM
Ok. I tried what you had above and got it to work. Sort of. I need to see if I can get the image to display off to the right without pushing down all text below it while it's being displayed in hover.

telekovar
Mar 8th, 2012, 04:35 AM
Ok. I tried what you had above and got it to work. Sort of. I need to see if I can get the image to display off to the right without pushing down all text below it while it's being displayed in hover.

May I clean up the HTML for you?

OscarGuy
Mar 8th, 2012, 05:29 AM
Sure. It's a bit bulky as is.

telekovar
Mar 8th, 2012, 06:10 AM
Alright, what I did was move the styles into the stylesheet, instead of having them inline... it's better practice. Changed the names into a list to make it easier to manage. Added some classes, floated the image to the right. Everything is in a wrapper div to keep it a fixed width... you don't have to have it.

To bold the line, add font-weight: bold; to ul li { }
There is an unused class span.name { } if you need it.



<style type="text/css">
div.wrapper { width: 600px; }
ul { padding-left: 0; }
ul li { list-style: none; margin-bottom: 12px;}
span.year { color: #990066; }
span.name { }
span.trigger span.pictured { color: #660099; }

span.trigger div.popup {
display: none;
float: right;
}

span.trigger:hover div.popup {
display: inline;
}
</style>


<div class="wrapper">
<ul>

<li>
<span class="year">1911: </span>
<span class="name">Edmund H. North (79 at death)</span>
<span class="trigger">
<span class="pictured">[Pictured]</span>
<div class="popup">
<img src="http://www.cinemasight.com/wp-content/uploads/2012/03/EdmundHNorth.jpg" title="Edmund H. North" />
</div>
</span>
</span>
</li>

<li>
<span class="year">1911: </span>
<span class="name">Jack Solomon</span>
<span class="trigger">
<span class="pictured">[Pictured]</span>
<div class="popup">
<img src="http://www.cinemasight.com/wp-content/uploads/2012/03/JackSolomon.jpg" title="Jack Solomon" />
</div>
</span>
</span>
</li>

<li>
<span class="year">1911: </span>
<span class="name">Georges Delerue</span>
<span class="trigger">
<span class="pictured">[Pictured]</span>
<div class="popup">
<img src="http://www.cinemasight.com/wp-content/uploads/2012/03/GeorgesDelerue.jpg" title="Georges Delerue" />
</div>
</span>
</span>
</li>

</ul>
</div>

OscarGuy
Mar 9th, 2012, 06:15 AM
Ok. I got it to work. It looks like the main reason it wouldn't work is because of inheritance. WordPress is a bit tricky with how it filters through css information and unless I put an extra #content-body tag in front of each of those pieces of code, it wouldn't work.

Anyway, the float is all the way to the right. Is there any way to put it right next to the word pictured? Or is that too cumbersome to create? I tried just removing the float command and it adjusted the text to align at the bottom of the image instead of the top.

OscarGuy
Mar 9th, 2012, 06:16 AM
And here's another quandary. Is there a way to make a flyaway from a picture that shows the "title" of the image in larger than standard font when hovering over an image?

telekovar
Mar 9th, 2012, 06:33 AM
Ok. I got it to work. It looks like the main reason it wouldn't work is because of inheritance. WordPress is a bit tricky with how it filters through css information and unless I put an extra #content-body tag in front of each of those pieces of code, it wouldn't work.

Anyway, the float is all the way to the right. Is there any way to put it right next to the word pictured? Or is that too cumbersome to create? I tried just removing the float command and it adjusted the text to align at the bottom of the image instead of the top.

Yeah, that's how I normally code things... I'm usually very specific with css.


And here's another quandary. Is there a way to make a flyaway from a picture that shows the "title" of the image in larger than standard font when hovering over an image?

I have found that this will work for both your problems. Sadly, I cannot think of any way to pull the text from the title of the image, without javascript. And tooltips are controlled by the browser. So, this is an option.

I have made the popup background #ff0000 so you can clearly see it.



span.trigger div.popup {
display: none;
position: absolute;
background: #ff0000;
padding: 12px;
text-align: center;
}

span.trigger div.popup h3 {
margin: 0;
padding: 0;
}




<div class="popup">
<h3>Edmund H. North</h3>
<img src="http://www.cinemasight.com/wp-content/uploads/2012/03/EdmundHNorth.jpg" title="Edmund H. North" />
</div>

OscarGuy
Mar 9th, 2012, 02:31 PM
Ok. I got the image to pop up to the direct right. I had to change the display back to inline as it wouldn't show up otherwise and then changed around the padding to make it look best, but it seems to work.

As for the other issue, It's actually an image that I want to hover over in another part of the article to display a popup with the name and I can probably just type in the name of the person for it to pop up with if necessary.

telekovar
Mar 10th, 2012, 12:05 PM
Ok. I got the image to pop up to the direct right. I had to change the display back to inline as it wouldn't show up otherwise and then changed around the padding to make it look best, but it seems to work.

As for the other issue, It's actually an image that I want to hover over in another part of the article to display a popup with the name and I can probably just type in the name of the person for it to pop up with if necessary.

Just a quick thought.



<style type="text/css">
div.wrapper div.photo_name {
text-align: center;
width: 72px;
}

div.wrapper div.photo_name p {
border: solid #000000 1px;
margin: 0;
padding: 5px;
position: absolute;
margin-left: 72px;
display: none;
}

div.wrapper div.photo_name:hover p {
display: block;
}
</style>

<div class="wrapper">
<div class="photo_name">
<p>Georges Delerue</p>
<img src="http://www.cinemasight.com/wp-content/uploads/2012/03/GeorgesDelerue.jpg" title="Georges Delerue" />
</div>
</div>

OscarGuy
Mar 12th, 2012, 02:22 PM
I haven't tried the graphic/text mouseover element yet, but everything else is working, thanks for that, but I did come across another issue with the code that's purely cosmetic.

Because there's a div and not just a span in the line with the Pictured, the line below has extra white space than other lines without the word pictured on it (I don't have images for all of the people on the list). Is there a way to correct this?