-
1. Re: How do they do hover with links in the hover display?
Nancy O. Oct 16, 2011 11:19 AM (in response to TCarp)Your example uses Javascript. It looks an app built with Dojo toolkit
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
-
2. Re: How do they do hover with links in the hover display?
TCarp Oct 18, 2011 7:04 AM (in response to Nancy O.)Thanks Nancy, however I was looking for a similar result without using scripting.
It may turn out I can't even come close without scripting. The workaround is probably to place the links outside the hover "image".
Tom
-
3. Re: How do they do hover with links in the hover display?
Nancy O. Oct 18, 2011 10:43 AM (in response to TCarp)CSS Disjointed Rollovers (aka tooltips)
http://alt-web.com/DEMOS/CSS-Disjointed-Image-Rollover.shtml
CSS Disjointed Rollovers Sample (view source to see code)
http://alt-web.com/DEMOS/CSS-Disjointed-Rollover-1.shtml
CSS Disjointed Image Viewer
http://alt-web.com/DEMOS/CSS-Image-Viewer.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
-
4. Re: How do they do hover with links in the hover display?
TCarp Oct 19, 2011 7:46 AM (in response to Nancy O.)Nancy
Again, I really appreciate your posts but we're missing my specific question.
I can see a couple approaches to providing an image during a:hover. The question is can those images have links without using scripting?
It may be the answer is "no" in which case I can include link "buttons" below each thumb.
Tom
-
5. Re: How do they do hover with links in the hover display?
MurraySummers Oct 19, 2011 7:58 AM (in response to TCarp)The question is can those images have links
Yes.
without using scripting?
It depends, but in some cases, yes. Consider this example -
<style type="text/css">
p > span {
position:relative;
}
span span {
display:none;
}
span:hover span {
position:absolute;
display:block;
width:150px;
top:-3px;
left:-1px;
background-color:white;
}
</style>
</head>
<body>
<p><span>Testing <span>a <a href="#">LINK</a></span></span></p>
</body>
-
6. Re: How do they do hover with links in the hover display?
Nancy O. Oct 19, 2011 10:58 AM (in response to TCarp)Again, I really appreciate your posts but we're missing my specific question.
If you view the source code for CSS Disjointed Rollovers, they all contain anchors. The hash mark can be changed to http://example.com if you wish.
<ul class="rollover">
<li><a href="#">Link Item 1<span>tooltip 1<br />
caption</span></a></li>
<li><a href="#">Link Item 2<span>tooltip 2<br />
caption</span></a></li>
<li><a href="#">Link Item 3<span>tooltip 3<br />
caption</span></a></li>
</ul>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
-
7. Re: How do they do hover with links in the hover display?
MurraySummers Oct 19, 2011 11:12 AM (in response to Nancy O.)But the problem there is that tooltip 1/2/3 would also need to contain anchors. That would give you nested anchor tags and cause the browser to frim its blotzpom. That's definitely invalid code and result.
-
8. Re: How do they do hover with links in the hover display?
TCarp Oct 19, 2011 11:28 AM (in response to MurraySummers)Murray and Nancy
You've both given me enough to move forward and try in the context of my specific use. Pls stay subscribed and I'll post back if I have further questions.
Thanks for both of you staying so involved in these forums.
You've both helped me (and presumably many others) in the past.
Tom
-
9. Re: How do they do hover with links in the hover display?
Nancy O. Oct 19, 2011 11:29 AM (in response to MurraySummers)But the problem there is that tooltip 1/2/3 would also need to contain anchors.
Maybe not. Mouse over the top row of this example. The text link & corresponding tooltip go to the same destination.
http://alt-web.com/DEMOS/CSS-Disjointed-Rollover-1.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
-
10. Re: How do they do hover with links in the hover display?
pziecina Oct 19, 2011 11:31 AM (in response to TCarp)TCarp wrote:
What also makes this site interesting is how the hover grays out the rest of the page. Although not necessary for what I'm working on, I'm also just curious how they did that.
Hi
Keep in mind I am only answering this part of your question and not providing a solution, (not even an example) that would be x-browser, as Nancy and Murray are doing.
To do this using pure css you would have to use a combination of css3 animations/transitions/transforms and generated content,(modified css3 text module version) but currently all these css3 items are only available in Safari/Chrome/Firefox, (FF v5+) and will also be available in IE10.
PZ



