homepage Welcome to WebmasterWorld Guest from 54.211.97.242
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Alt Text-like effect
Is there a JS event/behavior for this
TomJones

10+ Year Member



 
Msg#: 365 posted 2:38 pm on Apr 15, 2003 (gmt 0)

I'm looking to have a text story pop-up when an image is clicked or on mouseover (preferrably). I want the effect to disappear once the mouse moves off. I'm hoping there is something out there but, all I have found sofar pops in a new window or, pops a warning screen (very ugly). I'm hoping to pop a text layer/window that appears above page content and is possibly scrollable. I've got all the dreamweaver extensions I can think of but, none of the behaviors do this. Thanks!

 

WibbleWobble

10+ Year Member



 
Msg#: 365 posted 3:51 pm on Apr 15, 2003 (gmt 0)

If its onmouseover, it won't be able to scroll, because the layer (or whatever you wish to call it) won't have focus.
Onclick events could do this. Creating a javascript toggle to turn visibility: hidden; (as a style attribute) on and off would do it. I don't know javascript syntax, but the basics ought to be:

<img onclick="callyourtoggle()">
<div positioned where you want it and style="visibility: hidden;">

javascript:

if visibility: hidden then make it visible onclick
else visibility stays hidden;

Or something.

There are existing scripts that do this, using DOM/JS and CSS (DHTML), have a gander at a few dhtml script sites.

[edit]I remembered the name of the script that provides textual popups that may do the job: Overlib

richardb

10+ Year Member



 
Msg#: 365 posted 6:07 pm on Apr 15, 2003 (gmt 0)

Hi Tom Jones

If you are using MM products. The MM exchange has a number of add-ons for UD and DW that will do the trick.

Used to be

www.macromedia.com/exchange but they are messing around but you'll find it.

Rich

tedster

WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 365 posted 6:13 pm on Apr 15, 2003 (gmt 0)

Tom - I don't get how these two features can co-exist:

"effect to disappear once the mouse moves off"
"a text layer/window that ... is possibly scrollable"

If the mouse moves off the trigger image in order to scroll the text window, then the text will disappear, right? Or have I not fully understood what your question is saying?

TomJones

10+ Year Member



 
Msg#: 365 posted 7:08 pm on Apr 15, 2003 (gmt 0)

Thanks for the replys, M8s!

Wibble Wobble- I'll give it a go. I messed with the different behaviors for about 2 hours. All intersting, none satisfying. I don't remember trying that combination so, I'll give it a go. I'll check some DHTML, I haven't used much of that, that I know of ;)

Richard- I've got so many extensions my head is spinning. I've got everything that the MM Exchange offers plus, Dreaweaver Fever and Project 7's extensions. Do you know a particular one that works because, I've tried just about all (maybe even all)?

Tedster- They would indeed be contradicatory. I don't know any exact behavior so, I'm just looking for suggestions. I'd like it to be scrollable text but, I'd take a layer that pops up and then disappears over existing text. The onclick vs. mouseover is whatever the behavior/event calls for. Wheather it can be done onclick or onmouseover, I'll take it either way.

Thanks for the input!

txbakers

WebmasterWorld Senior Member txbakers us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 365 posted 9:37 pm on Apr 15, 2003 (gmt 0)

There is a javascript called overLib which does this. It's a very well written script.

TomJones

10+ Year Member



 
Msg#: 365 posted 1:01 am on Apr 16, 2003 (gmt 0)

Thanks, TX!

Looks like exactly what I'm looking for. Much Obliged!

TJ

WibbleWobble

10+ Year Member



 
Msg#: 365 posted 11:52 am on Apr 16, 2003 (gmt 0)

Hmpf, I'm sure I mentioned that ;)

TomJones

10+ Year Member



 
Msg#: 365 posted 4:30 pm on Apr 16, 2003 (gmt 0)

You sure did, Wibble Wobble!

Not paying attention to small details/type will be the end of me some day. I am truly American, need the extra large type on the extra large computer so, I can dream about finishing my extra large site. Is there a way I can get it all for free?

txbakers

WebmasterWorld Senior Member txbakers us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 365 posted 4:45 pm on Apr 16, 2003 (gmt 0)

Overlib is a free download.

TomJones

10+ Year Member



 
Msg#: 365 posted 5:14 pm on Apr 16, 2003 (gmt 0)

Right on, TX. I was kinda making a joke about wanting everything Extra Large and getting it all for free. I DLed Overlib last night, hope to get it into action today or tomorrow.

WibbleWobble

10+ Year Member



 
Msg#: 365 posted 9:21 am on Apr 17, 2003 (gmt 0)

I've got a quick (and obvious) hover script working, just about, its crude, but I forgot to email myself the full toggle and browser recognition stuff. Anyway.

The markup
<a href="#whatever" onmouseover="show()" onmouseout="hide()" class=whatever>
<img src="boogie nights">
</a>
<div style="position: absolute; top: whatever; right-or-left: whatever; visibility: hidden;" id="yourlayer">blah blah your text popup thing or whatever goes here</div>

The code
<script type="text/javascript">
function show() {
document.getElementById('yourlayer').style.visibility='visible';
}
function hide() {
document.getElementById('yourlayer').style.visibility='hidden';
}
</script>

Its not perfect by a long way - for a start, it only works on the given layer name, rather than on anything with the show/hide call. It also doesn't check to see if getelementbyID actually exists, which it doesn't in some browsers (document.all and document.layers are the other two, iirc) and it doesn't toggle onclick, though it could given some modification.

Anyway, it provides the basis for a simple and singular popup on a page.

WibbleWobble

10+ Year Member



 
Msg#: 365 posted 9:39 am on Apr 17, 2003 (gmt 0)

Ok, found the code I based my full toggles scripts on, on a website. Hurray for search engines.

found here [pageresource.com] it details exactly what you seem to be after - a script for onclick events or onmouseover events.

The code
<script type="text/javascript">
function accessCSS(layerID){ //this finds out which DOM is used to get to the style
if(document.getElementById){
return document.getElementById(layerID).style;
}else if(document.all){
return document.all[layerID].style;
}else if(document.layers){
return document.layers[layerID];
}
}

function toggleVis(layerID){ // this performs the actual toggle
if(accessCSS(layerID).visibility=="hidden" accessCSS(layerID).visibility=="hide"){
accessCSS(layerID).visibility= "hidden";
}else{
accessCSS(layerID).visibility= "visible";
}
}
</script>

The markup
<div id="yourlayer" style="visibility:hidden;>blah</div>
<a href="#whatever" onclick="togglevis(yourlayer)">blah</a>

And finally, the onclick example [pageresource.com].

TomJones

10+ Year Member



 
Msg#: 365 posted 1:08 pm on Apr 17, 2003 (gmt 0)

Very Nice, WW!

I'm kinda new to importing js behaviors. I've been using the exisiting and add-ons within dreamweaver from time to time. So, it seems that I would href the behaviors like I reference PHP scripts, etc., correct? Would I do the same for yours?

Out of curiosity, the size of the script for Overlib is 44kb; each time I reference or use it on a page, do I essentially load that entire script? Is it a preload? I'm curious for two reasons: page load times and bandwidth usage.

txbakers

WebmasterWorld Senior Member txbakers us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 365 posted 1:19 pm on Apr 17, 2003 (gmt 0)

You preload the overlib script, just as you do any script that is externally referenced (CSS or JS)

So it is only downloaded once.

WibbleWobble

10+ Year Member



 
Msg#: 365 posted 1:31 pm on Apr 17, 2003 (gmt 0)

Unless caching is disabled, in which case it would be downloaded each and every refresh.
Personally, I prefer the code I pasted above, its more versatile, as it can be applied to any page element.

So, it seems that I would href the behaviors like I reference PHP scripts, etc., correct? Would I do the same for yours?

I don't quite get what you mean really, but this is how the href's would likely look.
onclick: <a href="#" onclick="togglevis(layer)">what ever you want clicked to make the layer appear</a>
onmouseover: <a href="http://url" onmouseover="show()" onmouseout="hide()">whatever you want linked</a>

In the case of onclick, you obviously can't have the href pointing anywhere, because otherwise the text would display only briefly before the new pageload.
From the code above, its fairly easy to make a better onmouseover script, too.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved