modx-lite Posted July 6, 2005 Report Share Posted July 6, 2005 Don't really know how to explain what I'm meaning so I guess the best way is to show you an example: http://www.cyphermusic.net/bands/forums/in...hp?showforum=65 When you roll the mouse over the differnt thread titles, a pop-up box appears, showing details of the first post within that thread. I'd like to use this in a slightly differnt way - I have lots of small preview thumbnails for a gallery, and want a pop-up to display the full image if the pointer rolls over the thumbnail. Is this possible? And if so, how? I'm guessing you can;t do it in HTML, so I'm thinking something to do with Java? (OK I really don't have a clue how so don't know why I'm trying to guess..) Any help would be great, and sorry for not describing it too well, please let me know if you don't understand what I mean fully. Cheers Quote Link to comment Share on other sites More sharing options...
Dai the Socket Posted July 6, 2005 Report Share Posted July 6, 2005 Hey. I'm not totally sure but, I think it's something to do with putting text inside the 'alt=" " ' bit. So if you wanted a link to have 'click here' text appearing, you'd put: alt="click here" or something. Just a long shot that I recall somewhere. :- Nick Quote Link to comment Share on other sites More sharing options...
Alexx Posted July 6, 2005 Report Share Posted July 6, 2005 Hey. I'm not totally sure but, I think it's something to do with putting text inside the 'alt=" " ' bit. So if you wanted a link to have 'click here' text appearing, you'd put: alt="click here" or something. Just a long shot that I recall somewhere. :P Nick ← It's nothing to do with that :P You can do it with your CSS style sheet and then defining say class="style:none" or you can add javascript up top and active with the 'onmouseover' command. Here is the more crappy javascript option Into <head> <STYLE TYPE="text/css"> <!-- #dek {POSITION:absolute;VISIBILITY:hidden;Z-INDEX:200;} //--> </STYLE> into <body> <DIV ID="dek"></DIV> <script TYPE="text/javascript"> <!-- Xoffset=-60; // modify these values to ... Yoffset= 20; // change the popup position. var old,skn,iex=(document.all),yyy=-1000; var ns4=document.layers var ns6=document.getElementById&&!document.all var ie4=document.all if (ns4) skn=document.dek else if (ns6) skn=document.getElementById("dek").style else if (ie4) skn=document.all.dek.style if(ns4)document.captureEvents(Event.MOUSEMOVE); else{ skn.visibility="visible" skn.display="none" } document.onmousemove=get_mouse; function popup(msg,bak){ var content="<TABLE WIDTH=150 BORDER=1 BORDERCOLOR=black CELLPADDING=2 CELLSPACING=0 "+ "BGCOLOR="+bak+"><TD ALIGN=center><FONT COLOR=black SIZE=2>"+msg+"</FONT></TD></TABLE>"; yyy=Yoffset; if(ns4){skn.document.write(content);skn.document.close();skn.visibility="visible"} if(ns6){document.getElementById("dek").innerHTML=content;skn.display=''} if(ie4){document.all("dek").innerHTML=content;skn.display=''} } function get_mouse(e){ var x=(ns4||ns6)?e.pageX:event.x+document.body.scrollLeft; skn.left=x+Xoffset; var y=(ns4||ns6)?e.pageY:event.y+document.body.scrollTop; skn.top=y+yyy; } function kill(){ yyy=-1000; if(ns4){skn.visibility="hidden";} else if (ns6||ie4) skn.display="none" } //--> </SCRIPT> Then lastly into your link: ONMOUSEOVER="popup('Link description here','yellow')"; ONMOUSEOUT="kill()" That will do what you said there, as in... it will actually move WITH the mouse, just replace the link desctiption with an <img> tag. If you want to do it so the image simply changes another image on the page, use dreamweaver and search their help files for 'disjointed rollovers'... dreawmeaver does the code for you :P I'd type up the good CSS option, but i doubt your using a stylesheet and XHTML... so the javascript version does the job ... :- Quote Link to comment Share on other sites More sharing options...
The enchanted broomstick Posted July 6, 2005 Report Share Posted July 6, 2005 mouse over effect Take a look at this page, hold your mouse over one of the 3 images and look at the effect it gives you. I personally think its quite a nice feature and saves space. Easy to use as well :P cheers, stu :- Quote Link to comment Share on other sites More sharing options...
Alexx Posted July 6, 2005 Report Share Posted July 6, 2005 mouse over effect ← Yeah, thats the static disjointed rollover version, same code dreamweaver produces. :- Your probs better using that, unless you WANT the image to move with your mouse over the content, like the link you provided. Quote Link to comment Share on other sites More sharing options...
The enchanted broomstick Posted July 6, 2005 Report Share Posted July 6, 2005 ooooh someone agreed with me, i swear im getting brainier :P" its a brilliant site i swear, stu :- Quote Link to comment Share on other sites More sharing options...
nohpee° Posted July 6, 2005 Report Share Posted July 6, 2005 just seeing if i can sneak some dreamweaver questions in: *using a custom colour background (selected from colour wheel) good or bad? *got a dark blue background and i inserted some flash text to go from grey to white on rollover, but it only appears when i rollover when it should be. i.e theres nothing on the page until i hover over where i know it is then it goes grey,then white.hmmm Quote Link to comment Share on other sites More sharing options...
Alexx Posted July 6, 2005 Report Share Posted July 6, 2005 just seeing if i can sneak some dreamweaver questions in: *using a custom colour background (selected from colour wheel) good or bad? *got a dark blue background and i inserted some flash text to go from grey to white on rollover, but it only appears when i rollover when it should be. i.e theres nothing on the page until i hover over where i know it is then it goes grey,then white.hmmm ← Yeah thats fine, the whole 'web safe colour pallet' thing has pretty much been scrapped now. You got your keyframes in the right place in flash? Sorry, don't know much about flash. Quote Link to comment Share on other sites More sharing options...
nohpee° Posted July 6, 2005 Report Share Posted July 6, 2005 nah its in dreamweaver, just insert>interactive images>flash text. being a bitch. all my other ones work Quote Link to comment Share on other sites More sharing options...
The enchanted broomstick Posted July 6, 2005 Report Share Posted July 6, 2005 if you want to make some good flash text effects you can download a program called "mix-fx" its so straight forward its unbelievable. Other than that i cant really help, im still a total newbie at flash :- stu :P Quote Link to comment Share on other sites More sharing options...
modx-lite Posted July 6, 2005 Author Report Share Posted July 6, 2005 Cheers everyone, Alexx seems to have found what I'm needing and cheers Stu for that other link, I've been trying to find out how to do that 'static disjointed' thing for ages! Alexx - I'm just a bit confused as I don;t know wher to put the code that you say goes 'in the link bit', i.e. this code: ONMOUSEOVER="popup('Link description here','yellow')"; ONMOUSEOUT="kill()" I've got images which I want as the 'area' for the rollover thing. i.e. <img src="images/photo1p.jpg" width="35" height="35"> So where abouts does the ONMOUSE..... etc bit go? Thanks again everyone Quote Link to comment Share on other sites More sharing options...
Simon Posted July 6, 2005 Report Share Posted July 6, 2005 Cheers everyone, Alexx seems to have found what I'm needing and cheers Stu for that other link, I've been trying to find out how to do that 'static disjointed' thing for ages! Alexx - I'm just a bit confused as I don;t know wher to put the code that you say goes 'in the link bit', i.e. this code: ONMOUSEOVER="popup('Link description here','yellow')"; ONMOUSEOUT="kill()" I've got images which I want as the 'area' for the rollover thing. i.e. <img src="images/photo1p.jpg" width="35" height="35"> So where abouts does the ONMOUSE..... etc bit go? Thanks again everyone ← Inside your link. For example; <a href="link.ext" ONMOUSEOVER="popup('Link description here','yellow')"; ONMOUSEOUT="kill()">Rollover this to see info</a> Try and use all lower case for the attributes though, so it would be; <a href="link.ext" onmouseover="popup('Link description here','yellow')"; onmouseout="kill()">Rollover this to see info</a> Quote Link to comment Share on other sites More sharing options...
modx-lite Posted July 6, 2005 Author Report Share Posted July 6, 2005 Cheers Simon, I think I get that bit now, but how do I get the same effect for an image? It's not a link that i have (not <a href...etc>) , but and image (<img src=.... etc>) And when I put the code in liek this: <img src="images/photo1p.jpg" width="35" height="35" onmouseover="popup('<img src="images/photo1.jpg"> ','yellow')"; ONMOUSEOUT="kill()"> it doesn't work! I'm guessing I've done it wrong somehow but I can;t find just where. When I preview the page, it has the original thumbnail image (the area where I want the mouseover thing to appear), I just get this text showing: ','yellow')"; ONMOUSEOUT="kill()"> as though a tag's been closed too early or soemthing? Quote Link to comment Share on other sites More sharing options...
modx-lite Posted July 6, 2005 Author Report Share Posted July 6, 2005 (edited) I'll upload the page in a second so you can see what I mean, I'll edit this post with link. EDIT: Uploaded the page, hopefully this will make it clear, please view the source to try work out what I've messed up! Clickity Chheeers Edited July 6, 2005 by modx-lite Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.