Script to describe something - new lines appear below if mouseover
I've seen some sites where, if you move your mouse over a bit of text or click on the text, a few lines appear below it in which the webmaster can provide details about the text. I don't know what this functionality is called, so can't find it any of the script sites.
Alternative would be a script which described the text in a TITLE or ALT tag format, but with larger font and scope for longer text.
Thanks very much.
demonhale posted this at 14:46 — 17th April 2006.
He has: 3,278 posts
Joined: May 2005
got to javascriptkit or dynamicdrive and look for mouse-over effects... you will find it there
timjpriebe posted this at 16:34 — 17th April 2006.
He has: 2,667 posts
Joined: Dec 2004
Are you looking for something like what I do with the icons on this page:
http://www.tandswebdesign.com/portfolio
Azam.net posted this at 19:11 — 17th April 2006.
He has: 60 posts
Joined: Sep 2005
Thanks demonhale
timjpriebe - that's really neat. How did you do it?
dk01 posted this at 19:19 — 17th April 2006.
He has: 516 posts
Joined: Mar 2002
Sweet script Tim. Is that a custom script you wrote or a pre-made one?
demonhale posted this at 19:36 — 17th April 2006.
He has: 3,278 posts
Joined: May 2005
tims example is not actually a script perse... its a css trick with hover property... its easily done, if this is what you want to achieve... display none for default... and assign properties for hover...
dk01 posted this at 19:42 — 17th April 2006.
He has: 516 posts
Joined: Mar 2002
I meant the actual php portfolio script actually.
timjpriebe posted this at 19:46 — 17th April 2006.
He has: 2,667 posts
Joined: Dec 2004
That was accomplished with a bit of custom written CSS and HTML.
Here's the HTML, with some embedded CSS.
<a class="tooltips" href="advancedresults.php?service=design"><img src="icons/design.gif" width="50" hspace="5" border="0">
<span><b>Design</b><br>
We did some custom design work, whether it was the entire site or
just some individual graphics.</span></a>
And here's the CSS that's in an external file.
/* The following CSS is for tooltips on the portfolio pages */
a.tooltips {
position: relative;
text-decoration: none;
}
a.tooltips span {
display: none;
}
a.tooltips:hover {
background-color: #fff;
}
/* The above hover change defeats the IE/Win display changing bug */
a.tooltips:hover span {
position: absolute;
top: 13px;
left: 30px;
display: block;
background: #ddf;
border: 1px solid blue;
color: black;
width: 200px;
padding: 2px;
}
/* End of tooltip code */
Tim
http://www.tandswebdesign.com
timjpriebe posted this at 19:49 — 17th April 2006.
He has: 2,667 posts
Joined: Dec 2004
dk01, you posted that as I was writing my reply.
The PHP script was custom made. It was my first attempt to develop a PHP script using a lot of Dreamweaver's built in PHP capabilities.
Normally I just code from scratch. The generated code was borderline unreadable, but it's good for quick development.
Tim
http://www.tandswebdesign.com
dk01 posted this at 20:01 — 17th April 2006.
He has: 516 posts
Joined: Mar 2002
Nice. I was asking because I was thinking of doing something similar to that in terms of listing what work had been done for each client. Nice job.
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.