css Pop-Up simulation using hover
The concept is this:
When the user moves the mouse over a specific place on the page, the style of some (or multiple) elements changes.
With this one can simulate a pop up effect, or a change effect.
Quick Links for those who do not want to read the whole article:
Change to New Image on RollOver
Resize Image on Hover Example
Have Image or Text disappear on Rollover
Image or Text Appear (Pop Up) on RollOver
Have text popUp under an Image on Rollover
Image or Text PopUp in a Different Location (than the rollover location)
Multiple Images, Where the image which pops up is dependent on where the mouse is
Multiple Images, where the image which pops up is dependent on mouse location, Where images are part of a link
In order for these effects to occur, the element the mouse moves over must be a link.
(It can be any link, even one going nowhere or back here).
The way this is accomplished is via the css style command and the pseudo classes that are built in for links.
The link tag <a> has the following pseudo classes:
link
visited
hover
active
The link can have a different style assigned for each of these classes.
A very simple example of this would be to change how the link text looks, when the mouse hovers over it.
Source for below link:
<a class="myLink1" href="http://xiii.us/v/">Eileen's Test Link</a>
<style>
a.myLink1 {color:hotpink; font-weight:bold; font-family:comic sans ms;}
a.myLink1:hover {color:purple;}
</style>
Have Image or Text disappear on Rollover
In the next example I will use a copy of the same link, and turn it invisible, when the mouse hovers over it.
The code for my link looks like this:
<a class="myLink2" href="http://xiii.us/v/">Eileen's Test Link ii </a>
<style>
a.myLink2 {visibility:visible; color:purple; font-weight:bold; font-family:comic sans ms;}
a.myLink2:hover {visibility:hidden;}
</style>
Notice that when the mouse hovers over this link, the text goes away.
Also notice that it seems to get confused, as the text goes away.
(I will cover how to clean this effect up later)
[note to self: put link to cleaned up example here:]
Image or Text Appear (Pop Up) on RollOver
In the next example I will start with invisible text, and have the text show only when the mouse hovers over it.
The code for the below link (including style):
<a class="myLink3" href=" ">Eileen's Test Link iii </a>
<style>
a.myLink3 {color:white; font-weight:bold; font-family:comic sans ms; line-height:25px}
a.myLink3:hover {color:purple;}
</style>
Notice that instead of visibility:hidden I colored the text to match the background color. Had I used visibility:hidden, it would not have been there for the mouse to hover over it.
If you have a background image, with multiple colors, this may not work for you.
However you could place a clear gif or other container in the link area, to get a working roll over effect. I will cover more details later in this article.
[note to self: add cleaned up example and link to example here]
Change to New Image on RollOver
Change Image on MouseOver without Using JavaScript
To cause a picture to change when the mouse hovers over it, without using javascript (which myspace filters):
Pseudo code:
- Create a container div. This will be positioned relative (or absolute) and will act as the outer positioned container for your image.
It must have positioning, even if you want it in the exact location you create it. This allows the images to be placed absolute within it.
- Use an image as a link, and create a link.
- Create a 2nd link, using your second image (the image which will show when the mouse hovers over the 1st image)
- Use style to do the following:
- Position container div, you can use relative 0, if you don't want to move it. Position is necessary for it to act as a proper outer container.
- Position the 2nd link image in the top left corner of the outer div
- Position the 1st link image in the top left corner of the outer div.
- Style the 1st image to turn invisible when hovering over.
- Style the 2nd image to turn invisible
- Style the 2nd image to visibility:visible when hovering over.
The below code is a sample. It uses two small 50x50 images. The links go to my web page.
Change the image links to the URL of your images.
<i class="off">!-Change image when hover over-!
!code author:Eileen <a href="xiii.us/v">mySpace code Tutorials</a>
</i>
<div class="Div0">
<a class="img1" href="http://www.msplinks.com/MDFodHRwOi8veGlpaS51cy92"><img src="http://i17.tinypic.com/6b05ehc.jpg"</a>
<a class="img2" href="http://www.msplinks.com/MDFodHRwOi8veGlpaS51cy92"><img src="http://i24.tinypic.com/2u3w3s3.gif"></a>
</div>
<style>
a:hover img {filter:none;}
div.Div0 {position:relative; top:0px; width:50px; height:50px; border:1px pink solid;}
a.img2 {position:absolute; top:0px; left:0px;}
a.img1 {position:absolute; top:0px; left:0px;}
a:hover img {filter:none;}
div.Div0 {position:relative; top:0px; width:50px; height:50px; border:1px pink solid;}
a.img1 {position:absolute; top:0px; left:0px;}
a.img2 {position:absolute; top:0px; left:0px;}
a.img1:hover img{visibility:hidden;}
a.img2 img {visibility:hidden;}
a.img2:hover img {visibility:visible;}
</style>
Adding Complexity Using Multiple blocks inside Link
In this example I am going to wrap an outer container (wrapper) around the link.
This cleans up the fuzzyness (as I call it) that I notice in example ii.
Notice that example ii sort of comes and goes, as the mouse hovers over it.
Compare that to the results below.
The follow code was used for the below link:
<div class="myDiv5">
<a class="myLink5" href="">
<span class="span5a">Eileen's Test Link v</span>
<span class="span5b"></span>
</a>
</div>
<style>
{! needed to make this work in IE !}
a:hover div, a:hover span {filter:none;}
{! get rid of default link underline !}
a {text-decoration: none}
{! position div and give it size so it can act as a wrapper !}
div.myDiv5 {position:relative; top:0px; left:0px; width:200px; height:30px;}
{! position link and spans inside the div; all same size and all placed in top left !}
div.myDiv5 a.myLink5,
div.myDiv5 a.myLink5 span {position:absolute; top:0px; left:0px; width:200px; height:30px;}
{! style behavior when NO hover !}
a.myLink5 span.span5a {display:block; color:purple; font-weight:bold; font-family:comic sans ms;}
a.myLink5 span.span5b {display:none;}
{! swap style on hover !}
a.myLink5:hover span.span5a {display:none;}
a.myLink5:hover span.span5b {display:block; color:magenta; font-weight:bold; font-family:comic sans ms}
</style>
Now I am going to use the same Technique, to CHANGE the text on hover
The code for the below link:
<div class="myDiv5">
<a class="myLink5" href="">
<span class="span5a">Eileen's Test Link vi</span>
<span class="span5b">Eileen's Other Test Link vi</span>
</a>
</div>
What is different, is that instead of making my text go away, I make it change. I change BOTH the actual Text AND the text color.
Have text popUp under an Image on Rollover
Popup Text Underneath an image, when hovering over the image
Hover over the above image to see the effect.
The code, I used to obtain the effect, is below:
<div class="fishdiv0">
<center>
<a class= "hoverTest" href="http://xiii.us/xfs/">
<img src="http://i28.tinypic.com/2e1d1lc.jpg"><br>
<span class="popUpSpan">No you should NOT; Said the Fish in the Pot</span>
</a>
</center>
</div>
<style>
div.fishdiv0 {width:250px; height:auto}
a:hover img {filter:none;}
a img {border:0px !important;}
a.hoverTest {width:200px; height:auto; }
a span.popUpSpan {visibility:hidden;}
a:hover span.popUpSpan {visibility:visible; display:block; border:1px silver solid}
a span.popUpSpan {color:magenta; font-size:13px}
a:link, a:hover {text-decoration:none !important;}
</style>
Image or Text PopUp in a Different Location (than the rollover location)
Make something "pop Up" elsewhere on the screen when hovering over a link.
In this example, an image pops up, somewhere else on the screen, when the mouse hovers over the link.
To do this, I am going to create some boundaries, to use as an outer wrapper.
This is not for the link (as I did above) this is because I have no idea where this example will actually fall within my article.
I want the image to show up (without the need to scroll).
So first I am going to create a boundary, to serve for our example.
The magenta dashed border, outlines the boundary for this example.
Pretend that is either you page, or a wrapper div you are within BEFORE you create your link.
I am now inside of the div which is acting as my pseudo page for this example.
The code for my actual Link (including style) is this:
<a class="myLink7" href=""><span class="span7">LINK TEXT HERE</span>
<div class="myHimg"><img src="http://i24.tinypic.com/35ndmx3.gif"/>
</div></a>
<style>
{! needed for IE !}
a:hover img {filter:none;}
a.myLink7 img {border:none}
a.myLink7, a.myLink7 span.span7 {width:194px; height:24px;}
a.myLink7 div.myHimg {display:none;}
a.myLink7:hover div.myHimg {
display:block; position:absolute; top:0px; right:0px;}
</style>
When you hover the mouse over the link, a pop up image should appear in the top right of the section surrounded by the dashed magenta border.
The above concept can be expanded, to show a different image, if the mouse is hovered on a different part of the screen.
Multiple Images, Where the image which pops up is dependent on where the mouse is
To do this, multiple images are used and displayed one at a time in the same location.
The images are all rendered NOT displayed (or hidden) until the link is hovered.
As the link hovers over a particular link (which can be text or an image); only the image associated with that link, is rendered visible.
[note: If using display:none, for "hidden" images, it is not necessary to give them placement until they are displayed. If using visibility:hidden, position the images (stacked on top of each other), so they only take up space in the same location they will show when displayed. If there is NOT enough space taken up (by something) you may see a shift in other page contents when the image "pops up".]
The code used for my "Fish" example:
<div class="fishDiv">Hover over Each of the below Text Lines and look to the right:
<a class="myLink10" href=""><span class="span10">ONE FISH</span>
<div class="myHimg"><img src="http://i11.tinypic.com/87bwz8z.gif"/></div></a>
<a class="myLink10" href=""><span class="span10">TWO FISH</span>
<div class="myHimg"><img src="http://i11.tinypic.com/6t0o4f6.gif"/></div></a>
<a class="myLink10" href=""><span class="span10">RED FISH</span>
<div class="myHimg"><img src="http://i4.tinypic.com/866mxaa.gif"/></div></a>
<a class="myLink10" href=""><span class="span10">Blue Fish</span>
<div class="myHimg"><img src="http://i14.tinypic.com/87025ar.gif"/></div></a>
</div>
<style>
a.myLink10 img {border:none}
{! needed for IE !}
a:hover img {filter:none;}
{! size div which contains space for links AND images to show on hover !}
div.fishDiv {width:700px; height:150px; position:relative; top:0px; left:0px;}
{! size each link !}
a.myLink10, a.myLink10 span.span10 {width:200px; height:20px;}
{! render images not displayed; I use same class for each image div !}
a.myLink10 div.myHimg {display:none;}
{! style hover so that only the instance of the class which is being hovered shows !}
a.myLink10:hover div.myHimg {display:block; position:absolute; top:20px; right:0px;}
</style>
Resize Image on Hover
The code used for the above:
<a class="myLinkI1" href="http://xiii.us/v/"><img src="http://i17.tinypic.com/6b05ehc.jpg"></a>
<style>
a:hover img {filter:none;}
a.myLinkI1 img {width:auto; height:auto;}
a.myLinkI1:hover img {width:150px; height:auto}
</style>
Multiple Images, where the image which pops up is dependent on mouse location, Where images are part of a link
The below example shows how you can make the "pop up" image act as part of the link being hovered, so that the image remains visible as the mouse moves from the initial hover point to the "pop up" image.
The magenta borders, during the "pop up" show the boundaries of the link area.
The pink background, to each text link, shows the boundaries of that text link.
To make this work in IE6, I had to make my "pop up" image the background to the div, which defined the hover area. I did NOT have to do this to make it work in FireFox.
What was strange, was that in IE6, the div I defined for the hover area, which was larger than the actual image, worked as a link, EVERY WHERE EXCEPT where the actual image resided. Altering the z-index did not seem to help.
So I opted for the background-image solution.
<div class="fishDiv">Hover over Each of the below Text Lines and look to the right:<br>
<a class="mylink11" href="http://xiii.us/v/"><div class="linkText">ONE FISH</div>
<div class="hoverArea i1"></div></a><br>
<a class="mylink11" href="http://xiii.us/v/"><div class="linkText">TWO FISH</div>
<div class="hoverArea i2"></div></a><br>
<a class="mylink11" href="http://xiii.us/v/"><div class="linkText">RED FISH</div>
<div class="hoverArea i3"></div></a><br>
<a class="mylink11" href="http://xiii.us/v/"><div class="linkText">BLUE FISH</div>
<div class="hoverArea i4"></div></a><br>
</div>
<style>
{! set the image for each link as a background image !}
div.i1 {background-image:
url('http://i11.tinypic.com/87bwz8z.gif');}
div.i2 {background-image:
url('http://i11.tinypic.com/6t0o4f6.gif');}
div.i3 {background-image:
url('http://i4.tinypic.com/866mxaa.gif');}
div.i4 {background-image:
url('http://i14.tinypic.com/87025ar.gif');}
div.hoverArea{
background-repeat:
no-repeat;
background-position: center right;
}
a.mylink11 img {border:none}
{! needed for IE !}
a:hover div {filter:none;}
{! size div which contains space for links AND images to show on hover !}
div.fishDiv {width:700px; height:170px; position:relative; top:0px; left:0px;}
{! render hoverarea NOT there when not in state hover !}
div.hoverArea {display:none;}
{! show hoverarea on hover; define size of hover space!}
a:hover div.hoverArea {display:block; width:500px; height:170px; border:3px magenta solid;}
{! I want the hover to be active in the entire space; z-index keeps this below text for other links !}
a:hover div.hoverArea {position:absolute; top:0px; left:0px; z-index:1;}
{! by having a higher z-index this remains on top allowing the mouse to move to a new link !}
div.linkText {position:relative; top:0px; z-index:999}
{! size each link !}
a.mylink11, a.mylink11 div.linkText {display:block; width:100px; height:20px; background-color:pink}
</style>
Aucun commentaire:
Enregistrer un commentaire