PDA

View Full Version : Creating Links with .gifs

rvdplug
03-27-2003, 10:44 AM
Hey I can creat a link with a gif using rollover image mode but just to another file on my comp. I need it to link to other files on my webserver. How do I do this?
tmmoose
03-27-2003, 11:36 AM
<a href="http://your.html" onMouseOut="RestoreImg()"
rvdplug
03-27-2003, 12:18 PM
so should i just write that in my my page followed by the img src etc
tmmoose
03-27-2003, 12:31 PM
You Should Already H ave The Line In your Rollover code...<!-- Rollover Image Script - Place within <head> tag -->
<script language="JavaScript" type="text/javascript">
<!-- Hide from older browsers
function SwitchImg()
{ //start
var rem, keep=0, store, obj, switcher=new Array, history=document.Data;
for (rem=0; rem < (SwitchImg.arguments.length-2); rem+=3) {
store = SwitchImg.arguments[(navigator.appName == 'Netscape')?rem:rem+1];
if ((store.indexOf('document.layers[')==0 && document.layers==null) ||
(store.indexOf('document.all[')==0 && document.all==null))
store = 'document'+store.substring(store.lastIndexOf('.'),store.length);
obj = eval(store);
if (obj != null) {
switcher[keep++] = obj;
switcher[keep++] = (history==null || history[keep-1]!=obj)?obj.src:history[keep];
obj.src = SwitchImg.arguments[rem+2];
} }
document.Data = switcher;
} //end

function RestoreImg()
{ //start
if (document.Data != null)
for (var rem=0; rem<(document.Data.length-1); rem+=2)
document.Data[rem].src=document.Data[rem+1];
} //end

// end hiding contents -->
</script>
<a href="http://www.your.html" onMouseOut="RestoreImg()" onMouseOver="SwitchImg
('document.one','document.one','image2.gif')"><img src="image1.gif" name="one" width="0" height="0" alt="" border="0"></a>
Zero Angel
03-28-2003, 09:18 PM
You can also try a rollover script (http://www.dynamicdrive.com/dynamicindex15/domroll.htm) that makes a custom attribute, and is a lot easier to use then conventional scripts.

This one is found at www.dynamicdrive.com
DCElliott
03-29-2003, 05:55 AM
The simplest effects can actually be achieved using CSS rollovers. In them, the CSS (Cascading style sheet) will have code that specifies a different background image when the link is hovered. It can be extremely effective. One of the slickest implementations I have seen are the flexible buttons on a site Animgirl did (with a little help from yours truly) On this page (http://www.alliancemusic.org/recordings.html) you can see two different CSS buttons, one for the menubar and one for the HI and LO recording buttons. [AG, I hope you don't mind, but this is a really good example]

In the HTML, the rollover button behavior is defined only for the uniquely ided <div> called squish (cuz they are squishy buttons). The links look like oridinary links - no rollover code at all.<div id="squish">
<a href="link1.html">Link 1</a>
<a href="link2.html">Link 2</a>
<a href="link3.html">Link 3</a>
<a href="link4.html">Link 4</a>
</div>The CSS code is more complex, but only has to be created once (note: the code has been simplified somewhat for clarity):#squish a, #squish a:visited {
display: inline;
overflow:hidden;
height: auto;
margin: 0 0.4%;
padding: 0 .2em 2px;
line-height: 200%; /*Determines vertical spacing
between wrapped buttons*/
/*Explicit button borders for outset effect*/
border-top:1px solid #767 ;
border-right: 1px solid #767;
border-bottom: 1px solid #333 ;
border-left: 1px solid #333 ;
background: #312031
url(/header_footer/buttonnormal.gif)repeat-x50%;
color: #FFC0CB ;
text-align: center;
text-decoration: none;
}
#squish a:hover, #squish a:active {
background: #312031
url(/header_footer/buttonhover.gif) repeat-x50%;
color:inherit;
background-color:inherit;
padding: 2px .2em 0;
/*This changes padding from bottom to top increasing
sense of button going "in"*/
border-top:1px solid #333 ;
border-right: 1px solid #767;
border-bottom: 1px solid #767;
border-left: 1px solid #333;
}Basically, what is going on here is the the stylesheet swaps the background when the link is hovered, and also changes the border so that it reverses the outset effect to an inset effect. This only happens to the links that are in the id="squish" div. We specify this by saying to use this style only when a link is in that div by using: #squish a:hover - #squish is the unique ided div and a:hover would be a hovered link WITHIN the squish div - it would not be affected anywhere else.

The great thing is that this whole effect is done with two small gifs and loads quickly. You don't have a lot of rolloevr images to keep track of. The downside is that if you have special graphical text that you want to use, you are out of luck - you can only swap backgrounds and borders.

A very straightforward tutorial can be found here (http://www.westciv.com/style_master/house/cookbook/buttons.html) .

DE
Gren
05-05-2003, 09:29 PM
That CSS method is fun. A simpler version would be as follows:

HTML:
<A HREF="whatever.html"><IMG SRC="blank.gif" BORDEr="0"></A>

With blank.gif being a completely transparent .gif image in the same size as your rollovers.

The CSS would then be as follows

a {background: url(normal.gif);}
a:hover {background: url(rollover.gif);}

with normal being the pre-rollover state and, well, you figure the rest out on your own.

It saves time with a pre-loading script, because I think the browser takes care of that automatically when it renders your page. It takes care of screwing around with j-script. However it doesn't often work with mozilla and opera. If you're not interested in appealing to marginal audiences, then it's fine. If you're running this site for a business then I would go for old fashioned javascript.