KeyVision
Posts: 18
|
| Posted: 02/06/2005, 11:05 AM |
|
Hi
I have a grid form that I use for navigation with links loaded from a database, I would like to have a graphic follow the mouse as the use move over the different links, as I have seen on some sites. The graphic is like a selector appering to the left of the link on mouse-over.
Then linked to this problem is: I want a graphic to change dynamically dependant on the link the mouse is moving over.
I hope this makes sense.
I suppose I would have to use java to accomplish this, and my java skills is not very good, can somebody help.
|
 |
 |
Anothersledhead
Posts: 44
|
| Posted: 02/07/2005, 7:32 PM |
|
I am not quite sure I understand exactly what you are trying to do. I would try to do it with cascading style sheets. If you want a diffrent image for each link you would have to upload the appropriate images with the file upload component when creating the individual links. You can then call the images via inline styles.
|
|
|
|
KeyVision
Posts: 18
|
| Posted: 02/07/2005, 11:52 PM |
|
I would like to do it with css, but i'm not sure how, i dont know how to define the image in the style and change it onmouseover.
|
|
|
|
feha
Posts: 712
|
| Posted: 02/08/2005, 3:06 AM |
|
plesae check this link
http://www.mandarindesign.com/
You have lot's of tips how to do it in CSS
regards
feha
www.vision.to
_________________
Regards
feha
www.vision.to
feedpixel.com |
|
|
|
Martin K.
|
| Posted: 02/08/2005, 3:13 AM |
|
Hello.
You can make this Javascript.
In the Head from your side:
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}
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.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}
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[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.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))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onLoad="MM_preloadImages('{my_mouse_over}')">
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','{my_mouse_over}',1)"><img src="{my_mouse_out}" name="Image1" border="0"></a>
#############################################################
The Value from {my_mouse_over} and {my_mouse_out} you can make with two hidden Fields.
Example:
Make an hidden Field in your Navi Grid and Name it my_mouse_over.
In Before Show from the hidden Field my_mouse_over:
$the_mouse_overPic = "./pictures/my_mouse_over.gif"; // OR Make an DlookUp to get the MouseOverPic
$YourFormName->my_mouse_over->SetValue($the_mouse_overPic);
The same for the hidden Field my_mouse_out:
Now you have an Mouse Over Effect and on Sideload the {my_mouse_out} Pic is Shown.
On Mouse Over on Link the {my_mouse_over} Pic is shown.
Sorry about my english
Greets Martin
|
|
|
|
feha
Posts: 712
|
| Posted: 02/08/2005, 8:57 AM |
|
here is pure CSS no JavaScript
http://css.maxdesign.com.au/listamatic/horizontal18.htm
_________________
Regards
feha
www.vision.to
feedpixel.com |
|
|
|
KeyVision
Posts: 18
|
| Posted: 02/08/2005, 4:04 PM |
|
Thanks Everyone!
Got it sorted using pure CSS.
Works like a charm
Regards
KeyVision
|
|
|
|
Anothersledhead
Posts: 44
|
| Posted: 02/08/2005, 10:30 PM |
|
Gota love css good to hear things are working.
|
|
|
|
|
