Title: Mouseover Buttons
Description: Is it possible?
Misty - June 28, 2008 07:06 AM (GMT)
I'm messing around with a layout to eventually put up on my site (invisionfree hosted) and I had this idea that it would be cool with this layout to be able to have the Add Reply, New Topic, and New Poll buttons alter when putting your mouse over them. With the way things are set up on invisionfree, I can't straight-off see if it can be done. So far it looks discouraging, but I'm rather hopeful that someone might know a way to do it, or know some place that might know a way to do it.
I was already browsing IF support forums and haven't yet spotted anything there, but if anyone saw/has seen anything, I would be grateful to receive a link to it!
Elenlond - June 29, 2008 02:06 AM (GMT)
Well, I know in normal coding you can use javascript to change a button, so I imagine it would be possible to do it with IF. You could try inserting the javascript and seeing what happens. The code is:
| CODE |
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script> |
After that, concerning the images themselves, you would put:
| CODE |
| <a href="URL OF SITE" onMouseOver="MM_swapImage('general','','URL OF THE BUTTON YOU WISH TO APPEAR WHEN THE MOUSE HOVERS OVER IT',1)" onMouseOut="MM_swapImgRestore()"><img src="URL OF THE NORMAL IMAGE WHEN THE MOUSE ISN'T ON IT" name="TITLE OF THE BUTTON" border="0" id="ID OF THE BUTTON"></a> |
I don't know if that'll work or if it'll help, but I did use it for a website I made a few years ago and it worked.
Misty - June 29, 2008 04:16 PM (GMT)
The problem with using that is you only have direct control over the "img src" bit for the code in invisionfree, not the "a href" bit for each image. So, I can't directly stick in the "onMouseover/out" stuff into the "a href" lines.
I think the only way to do this would be if there is some kind of hack for it...but if there is one, I'm not sure where to find it. That's why I ask here, to see if someone knows one or where one can be found or something. There's a hack for practically everything else (adding fonts, adding font colors, new admin CP areas, adding sections to the stats area, adding profile categories...etc, etc, etc), so why not for something like this?
I'm still hopeful for someone to know something on where it might be possible to track one down...probably because I'm stubborn and really want to be able to do this for this layout I'm working on. XD
SpazzyMal - June 29, 2008 07:21 PM (GMT)
I would think this would be possible with CSS, actually. I'm doing something similar on my site, though in the sidebar. I'm not 100% sure it will work in the image area, but I don't really see why it wouldn't...
.button1 { position:relative; background:url(IMAGE HERE) no-repeat; white-space:nowrap; display:block; width:175px; height:35px; margin:0px; padding:0px; border:none !important; }
.button1 a { display:block; width:175px; height:35px; display:block; float:left; border:none !important; }
.button1 img { width:175px; height:35px; border:none !important; }
* html a:hover { visibility:visible; border:none !important; }
.button1 a:hover img { visibility:hidden; border:none !important; }
You'll want to put that in your CSS area, with the rest of your skin. You'll repeat, and rename/replace areas as needed. Such as, if you need another button, you'll make a .button2 section. The image used here should be the image you want to display when the mouse is hovering. Make sure to change the width and heights to match the dimensions of your picture.
<div class="button1"><a href="LINK HERE"><img src="IMAGE HERE" alt="ALT TEXT HERE" /></a></div>
This goes in your image area. The image used here is what you want to show when no one is hovering over the button. As above, if you want a new section, remember to make a new area for it in the CSS and change the name from button1 to button2, or whatever you'd like to name it.
silent cacophony - June 29, 2008 10:40 PM (GMT)
This requires some moderate coding ability, but there's a quick and easy rollover script on dynamic drive that should be applicable on your board. I've never done it on a board before, but I'm assuming that it should work if you put the javascript code in the "javascript" section of your board wrappers and then replacing the button codes in the "images" section with the codes they provide there .. Like, for example, instead of the default | CODE |
| <img src='newpollurl' border='0' alt=''> |
for the new poll button, replace it with
| CODE |
| <img src="originalimageurl" srcover="imageonmouseoverurl"> |
Here's the script, btw, that goes in the "javascript" section of your wrappers --
| CODE |
<script language="JavaScript1.2">
/*
Header Information------------------------------------[Do Not Remove This Header]--
Title: OO Dom Image Rollover
Description: This script makes it easy to add rollover/ mousedown
effects to any image on the page, including image submit buttons. Automatically
preloads images as well. Script works in all DOM capable browsers- IE5+, NS6+,
Opera7+.
Legal: Copyright 2005 Adam Smith
Author Email Address: ibulwark@hotmail.com
Date Created: June 6, 2005
Website: Codevendor.com | eBadgeman.com
Script featured on Dynamic Drive: http://www.dynamicdrive.com
-----------------------------------------------------------------------------------
*/
function imageholderclass(){
this.over=new Array();
this.down=new Array();
this.src=new Array();
this.store=store;
function store(src, down, over){
var AL=this.src.length;
this.src[AL]=new Image(); this.src[AL].src=src;
this.over[AL]=new Image(); this.over[AL].src=over;
this.down[AL]=new Image(); this.down[AL].src=down;
}
}
var ih = new imageholderclass();
var mouseisdown=0;
function preloader(t){
for(i=0;i<t.length;i++){
if(t[i].getAttribute('srcover')||t[i].getAttribute('srcdown')){
storeimages(t[i]);
var checker='';
checker=(t[i].getAttribute('srcover'))?checker+'A':checker+'';
checker=(t[i].getAttribute('srcdown'))?checker+'B':checker+'';
switch(checker){
case 'A' : mouseover(t[i]);mouseout(t[i]); break;
case 'B' : mousedown(t[i]); mouseup2(t[i]); break;
case 'AB' : mouseover(t[i]);mouseout(t[i]); mousedown(t[i]); mouseup(t[i]); break;
default : return;
}
if(t[i].src){t[i].setAttribute("oldsrc",t[i].src);}
}
}
}
function mouseup(t){
var newmouseup;
if(t.onmouseup){
t.oldmouseup=t.onmouseup;
newmouseup=function(){mouseisdown=0;this.src=this.getAttribute("srcover");this.oldmouseup();}
}
else{newmouseup=function(){mouseisdown=0;this.src=this.getAttribute("srcover");}}
t.onmouseup=newmouseup;
}
function mouseup2(t){
var newmouseup;
if(t.onmouseup){
t.oldmouseup=t.onmouseup;
newmouseup=function(){mouseisdown=0;this.src=this.getAttribute("oldsrc");this.oldmouseup();}
}
else{newmouseup=function(){mouseisdown=0;this.src=this.getAttribute("oldsrc");}}
t.onmouseup = newmouseup;
}
function mousedown(t){
var newmousedown;
if(t.onmousedown){
t.oldmousedown=t.onmousedown;
newmousedown=function(){if(mouseisdown==0){this.src=this.getAttribute("srcdown");this.oldmousedown();}}
}
else{newmousedown=function(){if(mouseisdown==0){this.src=this.getAttribute("srcdown");}}}
t.onmousedown=newmousedown;
}
function mouseover(t){
var newmouseover;
if(t.onmouseover){
t.oldmouseover=t.onmouseover;
newmouseover=function(){this.src=this.getAttribute("srcover");this.oldmouseover();}
}
else{newmouseover=function(){this.src=this.getAttribute("srcover");}}
t.onmouseover=newmouseover;
}
function mouseout(t){
var newmouseout;
if(t.onmouseout){
t.oldmouseout=t.onmouseout;
newmouseout=function(){this.src=this.getAttribute("oldsrc");this.oldmouseout();}
}
else{newmouseout=function(){this.src=this.getAttribute("oldsrc");}}
t.onmouseout=newmouseout;
}
function storeimages(t){
var s=(t.getAttribute('src'))?t.getAttribute('src'):'';
var d=(t.getAttribute('srcdown'))?t.getAttribute('srcdown'):'';
var o=(t.getAttribute('srcover'))?t.getAttribute('srcover'):'';
ih.store(s,d,o);
}
function preloadimgsrc(){
if(!document.getElementById) return;
var it=document.getElementsByTagName('IMG');
var it2=document.getElementsByTagName('INPUT');
preloader(it);
preloader(it2);
}
if(window.addEventListener){window.addEventListener("load", preloadimgsrc, false);}
else{
if(window.attachEvent){window.attachEvent("onload", preloadimgsrc);}
else{if(document.getElementById){window.onload=preloadimgsrc;}}
}
</script> |
This should work as far as I know, but if it doesn't, I might test it out myself and try to help you.
Good luck! :]
Misty - June 30, 2008 08:58 PM (GMT)
SpazzyMal: Your's works if you leave out the </div> part (hehe, yeah, bad coding to do that, but for some reason doesn't work when you put it in o.O), but stacks the list of images of the buttons for "add reply" and such vertically...which could be cool for a different style layout...hmm...great, now I'm going to get random layout ideas. XD
silent cacophony: Not sure whether yours is working or not...when I went to go try it, my net started to flip out and has decided to not load images properly. Right now, when I go to view a page to test to see if it works, I can't get the image to show. I'm not sure if that's because my net freaked, or if it's because it's not working. Unfortunately, can't do anything to figure that out today as I'm online with someone else's internet account because they had a bunch of stuff opened and didn't want to loose it, so I couldn't change to mine and can't restart or they'll be angered their stuff is gone...bah...
silent cacophony - June 30, 2008 09:10 PM (GMT)
I don't know too much about javascript or how tempermental it is, but try replacing the <script language="JavaScript1.2"> bit on the code I gave you with
| CODE |
| <script type="text/javascript"> |
and see what happens. :]
Misty - July 1, 2008 08:53 PM (GMT)
My computer/net was just spazzing. I went to my little layout WIP site today and looked and it all loaded just great (huzzah!). Thanks a million! Now I'm going to have a super-spiffy layout. WHOOT!
*makes evil plans for the layout*