need help [Archive] - HTML Forums - Free Webmaster Forums and Help Forums

View Full Version : need help

godskids3

07-14-2004, 06:25 PM

Hi there,

I am extremely new to the html world and finding out more everyday. I was recently given the opportunity to edit a web site for a local radio station where I live. I have a vague idea about html code, but am finding it relatively easy to search on the web for the code I need to accomplish what I desire, so far!

My current need has presented much difficulty for me. I desire to put a rollover on our page. I found our through "html 4 for Dummies" that I must use javascript for this function. Okay, I can accept that. They even listed scripting for a very bare bones rollover, then after I try and try and can't make it work, I read on and find out that the .gif's and the .html files have to be stored in the same location. Our web site has a place on line for uploading graphics and pictures. It only accepts .gif and .jpg

I have found it's really easy to surf the web for scripting for just about any rollover (or is that mouseover?) The problem is I don't completely understand what to do with it once I get it copied onto my computer. I copied a script and found I wasn't sure which parts I was supposed to insert my personal adaptations and which parts I am supposed to leave alone.

For instance I found the following script:
2 parts to this script
=============================================
part 1
===============================================
<script language="javascript">

</script>
<script>

</script>
======================================================
part 2, put this where you want your button to show
=======================================================

<a href="yoururl.htm"
onmouseover="filter('img1','a2'); window.status='Status Message';return true;"
onmouseout="filter('img1','a1'); window.status='';return true;" onclick="window.focus()">
<img src="yourimage.gif" name="img1" border=0 width=59 height=47></a>


Is is possible, that some one out there could highlight the parts that I am suppose to customise and help me figure out how to make this work? I am a quick study, but don't completely understand all the words used to navigate through this process yet, so please remember I am a beginner.

Quite a few years ago I took several programming classes at a local college. I found I was really proficient at adapting some one elses program for my own desires. I am sure I can do the same here, I am just needing the proverbial "leg up" to get me started.

coothead

07-15-2004, 07:56 AM

Hi there godskids3,

and a warm welcome to these forums :D

' I found our through "html 4 for Dummies" that I must use javascript for this function. '

This is not true, you can also achieve rollovers using 'css' also.
Here is an example.The css is placed in the head section of the
html document...
<html>
<head>

<style type="text/css">

</style>

</head>
<body>

<div><a id="rllvr" href="http://www.google.com/"></a></div>

</body>
</html>
The advantage of this is that it will work in browsers that have javascript disabled :cool:

Now here is a very simple example of the same rollover using 'javascript'...
<html>
<head>
</head>
<body>

<div>
<a href="http://www.google.com/"><img src="anim2.gif" border="0" alt=""
onmouseover="this.src='http://hstrial-dbayly.homestead.com/files/anim.gif'"
onmouseout="this.src='http://hstrial-dbayly.homestead.com/files/anim2.gif'" /></a>
</div>

</body>
</html>

coothead

07-15-2004, 08:01 AM

Hi there godskids3,

I forgot to mention in my previous post that,
if you are unfamiliar with 'css' you may
find this site w3schools.com (http://www.w3schools.com/css/default.asp) very useful :D

godskids3

07-15-2004, 10:55 AM

Thanks Coothead for your help. I don't know anything about css, so I decided to try the javascript rollover you gave me. the following is what I put on our website:

<html>
<head>
</head>
<body><div>
<a href="http://www.kcfyfm.com/"><img src="http://209.35.78.132/uploadedFiles/images/POWER-VERSE-ROLLOVER_01.gif" border="0" alt=""
onmouseover="this.src=’http://209.35.78.132/uploadedFiles/images/POWER-VERSE-ROLLOVER_01-ove.gif’"
onmouseout="this.src=’http://209.35.78.132/uploadedFiles/images/POWER-VERSE-ROLLOVER_01.gif’" /></a>
</div>

</body>
</html>

KCFYFM.COM is the website I am working on. After I put this script in and published it, the following showed up actually on the web page:

onmouseover="this.src=’http://209.35.78.132/uploadedFiles/images/POWER-VERSE-ROLLOVER_01-ove.gif’"
onmouseout="this.src=’http://209.35.78.132/uploadedFiles/images/POWER-VERSE-ROLLOVER_01.gif’" />
I also got the initial image, but no rollover effect. Also: I was working down in region 7 and this rollover script affected the spacing in region 1. Generally speaking the regions have absolutly no affect on each other.

All I want to do is have text that says KCFY POWERVERSE and when your mouse rolls over it it changes to Jesus loves you.

It seems no matter what I do, I get the same results. Is there something about the website that not allowing javascript? How would I go about finding out stuff like this?

I don't know much about the behind the scenes workings of the web site. I do know that the part that I work with is set up in regions with several sections available in each reagion for placement of images, text etc. I am sure I haven't told you enough to really make a difference, but maybe you might be familiar with something I have said.

Looking forward to hearing from you on this,
Thanks again for your help,

coder5436uk

07-15-2004, 11:26 AM

If you are just starting out you should really consider looking at css, you can do some really sites very basically with css.

CSS allows rollovers, colour changes and lots more from simple code

coothead

07-15-2004, 12:42 PM

Hi there godskids3,

your problem is caused by the single quotes that you are using... ’ :supereek:
...this gives the javascript error Invalid character
When I change it to... ' :cool: the rollover works ok.

I have seen this problem discussed before, but can not remember where unfortunately.
All that I can say is that the single quote that I use is on the same key as the @

Let's hope someone comes along and enlightens us with the technical explanation :D

godskids3

07-15-2004, 03:34 PM

Hi Coothead,

I was excited at the thought of such a simple fix. then I realized I don't have a ' on the same key as my @ symbol. The only other symbol I have that is even close is used with foreign languages, I think ( ` ) What I did then was to use the script you typed and carefully insert my .gif's, using your '. still to no avail. If you hear of anything or remember where this was discussed before give me a jingle. I can't help but keep wondering if there is something up with the web site ??? I will keep checking back to see if there are any others out there with the same demise as me!

Appreciate your time.

As to the other helpful soul that encouraged me (cuder 5436uk) to try css; I would love to, but I know very little html, and am wanting to get a bit more proficient in it, before I start branching out and confusing the issues with facts!

Thanks to you both for your help,

coothead

07-15-2004, 04:14 PM

Hi there godskids3,

Do not give up hope :D
You can use &amp#39; for the single quote
<html>
<head>
</head>
<body>
<div>
<a href="http://www.kcfyfm.com/">
<img src="http://209.35.78.132/uploadedFiles/images/POWER-VERSE-ROLLOVER_01.gif"
border="0"alt=""
onmouseover="this.src=&#39;http://209.35.78.132/uploadedFiles/images/POWER-VERSE-ROLLOVER_01-ove.gif&#39;"
onmouseout="this.src=&#39;http://209.35.78.132/uploadedFiles/images/POWER-VERSE-ROLLOVER_01.gif&#39;"/></a>
</div>
</body>
</html>

godskids3

07-15-2004, 06:01 PM

Hi guys,

You will never guess what ended up working on our site=:O I input the following code and voila :P

<a href="#" onMouseOver="document.the_image.src='http://209.35.78.132/uploadedFiles/images/POWER-VERSE-ROLLOVER_01-ove.gif';" onMouseOut="document.the_image.src='http://209.35.78.132/uploadedFiles/images/POWER-VERSE-ROLLOVER_01.gif';">
<img src="http://209.35.78.132/uploadedFiles/images/POWER-VERSE-ROLLOVER_01.gif" name="the_image" border="0"></a>

As you can see there are a few things less than the code you offered to me earlier. Apparently the way our web site is set up, there is no need for the items such as <html>, <body> etc :confused:

At any rate, I must give the credit to webmonkey.com. It was there I found a step by step tutorial that ended up showing me the light:bounce:

Thanks for all your help, I am sure I will be back eventually!:rocker:

By the way, coothead, I like your animated signature. How did you do that?

coothead

07-15-2004, 10:48 PM

Hi there godskids3,

' How did you do that? '

Xara3D :cool: