A little HTML help

Re: A little HTML help Posted by SnarkSephiroth on Tue Jun 21st 2005 at 6:51am

SnarkSephiroth

206 posts

Posted 2005-06-21 6:51am

Post #89964

SnarkSephiroth

member

206 posts 31 snarkmarks Registered: Sep 10th 2003 Occupation: Automotive Tech Student Location: Phoenix, Arizona

Some images in this post have been automatically down-sized, click on them to view the full sized versions:

Some images in this post have been automatically down-sized, click on them to view the full sized versions:

Some images in this post have been automatically down-sized, click on them to view the full sized versions:

I've decided that I wanted to design and create my own website. I was sick of all the templated websites that everyone has. I decided to create my own. My problem is this. I have this image that I am using for the background of the website. I designed it in PSP 8 (although not much of a design).

Please don't comment on the design, layout, or anything else you might be thinking. I just would like answers to my problem please. :smile:

My problem is this. I want the links on my not so uniformed nav bar, to go fuzzy when I put my cursor on them. I have already achieved the exact effect I wanted with a java script. Here is an example of what I am talking about.

Heres before :

User posted image

Heres after :

User posted image

In my HTML editor that I use, ( 1st Page 2000 ) I used a java script to achieve exactly what I wanted. But It was only with the smaller images, not the big picture. So I guess my question is how do I implement this effect into the bigger picture?

BTW, heres the code for the script. I doubt it will work if you load it up in an editor because you don't have the images. :


<script language="JavaScript" type="text/javascript">
<!-- Hide from older browsers
function SwitchImg()
[size=10][color=#808000]{[/color][/size] //start
var rem, keep=0, store, obj, switcher=new Array, history=document.Data;
for (rem=0; rem < (SwitchImg.arguments.length-2); rem+=3) [size=10][color=#808000]{[/color][/size]
store = SwitchImg.arguments[(navigator.appName == 'Netscape')?rem[size=10][color=#808000]:[/color][/size]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) [size=10][color=#808000]{[/color][/size]
switcher[keep++] = obj;
switcher[keep++] = (history==null || history[keep-1]!=obj)?obj.src[size=10][color=#808000]:[/color][/size]history[keep];
obj.src = SwitchImg.arguments[rem+2];
[size=10][color=#808000]}[/color][/size] [size=10][color=#808000]}[/color][/size]
document.Data = switcher;
[size=10][color=#808000]}[/color][/size] //end

function RestoreImg()
[size=10][color=#808000]{[/color][/size] //start
if (document.Data != null)
for (var rem=0; rem<(document.Data.length-1); rem+=2[size=10][color=#8080

Re: A little HTML help Posted by Leperous on Tue Jun 21st 2005 at 9:11am

Leperous

3382 posts

Posted 2005-06-21 9:11am

Post #89965

Leperous

Creator of SnarkPit!

member

3382 posts 1635 snarkmarks Registered: Aug 21st 2001 Occupation: Lazy student Location: UK

That's quite an excessive function for what you want to do- you'd be better off using getElementById since all this script seems to be doing is updating the image .src (http://www.filecloud.com use a cunning method of using background-images for everything, and shifting them), but aaanyway you'll survive with that :smile:

Although, you haven't actually said what you want doing with the 'big' image- I presume you want her image to be swapped too?

Re: A little HTML help Posted by NonStopableForce on Tue Jun 21st 2005 at 5:04pm

NonStopableForce

2 posts

Posted 2005-06-21 5:04pm

Post #89994

NonStopableForce

member

2 posts 0 snarkmarks Registered: Jun 21st 2005 Location: US

If your going to just want to blur the images, you can just do it in
photoshop, and then just use the mousover image swap thing, or yuo can
use style sheets on links, and put



Not sure if it works in Firefox...

-NSF

Re: A little HTML help Posted by SnarkSephiroth on Tue Jun 21st 2005 at 5:30pm

SnarkSephiroth

206 posts

Posted 2005-06-21 5:30pm

Post #89996

SnarkSephiroth

member

206 posts 31 snarkmarks Registered: Sep 10th 2003 Occupation: Automotive Tech Student Location: Phoenix, Arizona

Leperous said:
That's quite an excessive function for what you want to do- you'd be better off using getElementById since all this script seems to be doing is updating the image .src (http://www.filecloud.com use a cunning method of using background-images for everything, and shifting them), but aaanyway you'll survive with that :smile:

Although, you haven't actually said what you want doing with the 'big' image- I presume you want her image to be swapped too?

Please bare with me, because I am very new to this (This is my first). What I want is to have each link on that page blur out like in the Link picture. I just dont know how to do it. I have the code on how to make them links, but I don't know how to make that effect while doing the same thing.

NonStopableForce said:
If your going to just want to blur the images, you can just do it in photoshop, and then just use the mousover image swap thing, or yuo can use style sheets on links, and put



Not sure if it works in Firefox...

-NSF

I already have all the images blured. I just need to implement it into the main picture (the one with Elisha). I want those links to blur when ever I move my mouse over them, with the effect I created. Make any sense? I hope it does, because I am having a hard time explaning. Thanks guys. Hope you can still help.