hover effect not working on one page - fine on re st. .

[beka]

Hi,

the butterfly is supposed to have a simple hoverover effect like on this page: (scroll to bottom)

www.papillonfaceplace.com/organic.html

(it's a 'back to top' button)

it works fine on every page but the below...cannot figure out why...

www.papillonfaceplace.com/cskinc.html

scroll down just a tad.....

client wondering as well......

ASAP would be swell!

Thanks so much!!

Beka

[dharrison]

Hi Beka

Nice site! Very calming.

I personally can't see anything wrong with your JavaScript code. As it serves the same function on both pages have you tried saving the JavaScript that works into an external file (with extension .js) and calling it up, for example:

<script type="text/javascript" src="hover.js"></script>

That would also save you a few lines on each page as well which is always good news.

HTH

[wsmeyer]

The JavaScript is breaking on the second occurence of

<img name="butterfly2_01"

If you want to use it more than once on a page they each need a unique name.

William.

[drummin]

Hello,
Might I suggest...

Cut all the JS out of your head section.
Add this to your CSS.

.toplink a{width: 89px; height: 75px; background: url("images/butterfly2_01.jpg") no-repeat 100% 100%;; border: none; text-decoration: none;}
.toplink a:hover{width: 89px; height: 75px; background: url("images/butterfly2_01-over.jpg") no-repeat 100% 100%;; border: none; text-decoration: none;}

Change all link coding within page to this...
<div class="toplink"></div>

This is going to save tons of page code and work multiple times on the page.
Speaking of which, change the id="maintext" to a class tag as id's should only be used once per page. Make the change in CSS as well.
Also look for three extra </h4> tags you have and remove them.

Hope that helps.
Drummin

[beka]

Thank you all so much!

will have to try what y'all have suggested..i like the idea of putting all the js in an external css file...

if i can't quite get it, i'll be back!!

Thanks again!

[drummin]

Hi Beka,
I didn't say to put js in css file. That would not be good.
What I suggested was making the hover with CSS instead of js. So your removing all the js. Then add the CSS lines I showed to your CSS file.
Then replace the bulky code containing the link to the top with the div class line.
Understand?

Hope so.
Let me know...
Drummin

[beka]

Thanks Drummmn..i understand...well, i have done all that you suggested, but the little butterfly is not showing up....i'm sure i did exactly what you wrote...have not uploaded page yet...

[beka]

Speaking of which, change the id="maintext" to a class tag as id's should only be used once per page.

I'm a basic css user so am not clear on what you're suggesting and saying here...when i made the 'maintext' rule it was with the selector "class" chosen, so i guess i thought it was a class? the rule is actually not doing what i wanted it to do though....

thank you....

hope this all made sense...

.maintext {
	padding-left: 50px;
	padding-top: 20px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	padding-right: 25px;
}

[drummin]

Without seeing what you've done it's had to say what is going on.
Check pathway to images.
If images are in a folder be sure to add image folder name. If CSS is in a folder you need to "back out" of the folder.
For example:
../images/YourImageName.gif

As far as the maintext issue... the css shown in your last post looks fine. To call on this class in you pages you need to use the word "class" instead of id as in <span class="maintext">

If you still need help let us know. :)
Drummin

[wsmeyer]

There is an extra ; in the code provided by drummin:

.toplink a{width: 89px; height: 75px; background: url("images/butterfly2_01.jpg") no-repeat 100% 100%;; border: none; text-decoration: none;}
.toplink a:hover{width: 89px; height: 75px; background: url("images/butterfly2_01-over.jpg") no-repeat 100% 100%;; border: none; text-decoration: none;}

It is a bit of extra work at this point but it really would be worth the effort to convert it all to CSS.

William.

[edit] I tried to color it red but it didn't work out to well :( Just look in the code for ;; and delete one.

[drummin]

Noticed that ";" after posting... Won't affect funtion.

[beka]

here's a new page with the js removed and the the css added...i only tried it on the one butterfly above the blue animated text "the new wave".

www.papillonfaceplace.com/cskinc2.html

it's not showing up at all...the image path and all else looks fine to me.......i'm sure i missing something very simple....

thanks for all your expertise!!

[drummin]

Hi Beka,
Not seeing the toplink class in your pap.css file.
Needs to be there for this to work.
Try reloading css file.

[drummin]

Ya...
I just added the css code to the pap.css copy I have and it works fine.
Still got an extra </h4> on line 153. :)

By the way, the css in page can be added to pap.css file as well.

[drummin]

And as William pointed out, remove extra ; I had in css. My bad.

.toplink a{width: 89px; height: 75px; background: url("images/butterfly2_01.jpg") no-repeat 100% 100%; border: none; text-decoration: none;}
.toplink a:hover{width: 89px; height: 75px; background: url("images/butterfly2_01-over.jpg") no-repeat 100% 100%; border: none; text-decoration: none;}

[beka]

here she be - updated with all css on the pap.css page, no more js for these butterfly instances, removed the extra </h4> (thanks!) reloaded everything and nada....

www.papillonfaceplace.com/cskinc2.html

not sure why still no go...

[speed]

In the CSS you have:

toplink a{

it should be:

.toplink a{

Note the leading dot.

Also you will need to add display: block; to .toplink a so you end up with:

.toplink a{
display: block;
width: 89px;
height: 75px;
border: none;
text-decoration: none;
background-image: url(images/butterfly2_01.jpg);
background-repeat: no-repeat;
background-position: 100% 100%;
}

[drummin]

Hi Beka,
Glad you got this working!!!

Hey Speed,
Is block really needed in this case as they're using two images? The only time I add block is when I'm using a button-set image containing several buttons. Your knowledge of CSS in well respected. Can you clarify for me?

By the way, 100% 100% was for the repeat property and not backgroud-position. I suppose because we have no-repeat it should say 0 0; instead.
Thanks,
Drummin

[speed]

Hi drummin,

In the HTML it has:

<div class="toplink"></div>

The CSS has:

.toplink a{
    display: block; 
	width: 89px;
	height: 75px;
	border: none;
	text-decoration: none;
	background-image: url(images/butterfly2_01.jpg);
	background-repeat: no-repeat;
	background-position: 100% 100%;
} 

.toplink a:hover{
	width: 89px;
	height: 75px;
	border: none;
	text-decoration: none;
	background-image: url(images/butterfly2_01-over.jpg);
	background-repeat: no-repeat;
	background-position: 100% 100%;
}

Although the <div> is a block element the <a> tag is an inline element and it is this that is given width, height and the background image.

However as the <a> tag is inline it will not respect the dimensions, well not in Firefox any way, therefore you need to force the tag to be block so that it picks up the dimensions. You could also wrap the <a> tag around an image or other element which would achieve roughly the same.

[drummin]

Thanks Speed!
Learning all the time...

[beka]

Yahooooooooooooo!

thank you so much drummin and speed!!

happiness...now i can get paid..!

css is so layered...i need to learn more than the basics...

really appreceiate your help in solving the issue that is thankfully no more!