 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
drakoumel
Joined: 17 Mar 2008
Posts: 3
|
 Posted: Mon Mar 17, 2008 9:32 am onmouseover in perl/cgi script |
 |
|
|
hi, i am writing a perl/cgi script and i have reached the point to display the results on an web page.
the results are some images and some sentences that follow the images. how can i generate the onmouseover (i do not use javascripts), where when the mouse passes over a certain image some sentence will be displayed at the bottom of the web page?
should i use text/javascript in order to enable the onmouseover element? |
|
kanenas
Joined: 14 Dec 2004
Posts: 310
|
| Posted: Tue Apr 29, 2008 2:01 pm Javascript or CSS can be used to hide/reveal content. |
|
|
|
As it's server-side only, Interaction between your Perl script and the browser is limited to processing & sending content (basically, the avenue of HTTP). It has no control over client side behavior, such as DOM events (mouseover et al.). You can use Javascript (as you asked), though a CSS-only approach may also work, depending on how the document is structured. (aside: this means you should ask in the DHTML forum, not the Perl forum. By picking the right forum, you're more likely to get readers who know the answer to you questions.)
I'm assuming that when you ask "should i use text/javascript in order to enable the onmouseover element?" you also meant to ask "How would I ...?" An even better way of asking for help would be to say what you want to do and why; e.g.: "I want to make some text visible at the bottom of a web page when the mouse cursor is over an image. How could I achieve this? This is what I've tried so far: [...]". (As patronizing or smarmy as it may seem, learning how to ask questions makes it easier for others to answer your question and helps you understand the problem more, sometimes resulting in your discovering the solution.)
All the samples below use the following CSS style sheet.
| Code: |
.hidden { visibility: hidden; }
.capton {
position: absolute;
bottom: 0px;
}
|
The CSS-only way requires both the image and the text to be the children of an element whose content box contains only the element. If you want to support IE6 (which, sadly, we have to for now), the parent element must be an anchor:
| Code: |
<style type="text/css">
a.revealer:hover .caption {
visibility: visible;
}
</style>
...
<a class="revealer" href="#" onclick="return false;">
<img src="[...]" />
<div class="caption hidden">Sphinx of black quartz, judge my vow.</div>
</a>
|
If you use Javascript, I recommend having the event listeners add or remove a class from the text node rather than directly manipulating its style. It won't matter much in the example below, but when you want to dynamically apply a more complex style, it's a much cleaner approach.
| Code: |
<script type='text/javascript'>
function showNodeById(id) {
var node = document.getElementById(id);
if (node) {
node.className = node.className.replace(/ hidden/g, '');
}
}
function hideNodeById(id) {
var node = document.getElementById(id);
if (node) {
node.className += ' hidden';
}
}
</script>
...
<img onmouseover="showNodeById('Sphinx')" onmouseout="hideNodeById('Sphinx')" src="[...]" />
...
<div id="Sphinx" class="caption hidden">Sphinx of black quartz, judge my vow.</div>
|
That should get you started. |
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
 |
|
|
|
|
|
|
|
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
