Need help with HTML or CSS on index.php

[Guest]

I've created a table that I want to put on the home page of my website. I've done this before with no problem; but, this time...I'm trying to create mouse rollover effects. I want the colors of the links to be white and when the mouse rolls over the links, they turn a different color. Here's an example of the beginning of the table; a cell in the table that I cannot get to work:

 

<table width="550" cellspacing="0" cellpadding="6" align="center">
  <tr><td style="text-align: center; background: #ff99ff; font-family: arial, helvetica, sans-serif; font-size: 15px; border-right: 3px solid #000000; border-left: 3px solid #000000; border-top: 3px solid #000000; font-weight: bold;"><a href="http://www.mysite.com/product.html" title="Name of Product" style="color: #ffffff; text-decoration: none;" onMouseOver="this.style.color='#cc3399';" onMouseOut="this.style.color='#ffffff';">NAME OF PRODUCT</a></td>

 

Everything about this code works except for the onMouseOver and onMouseOut chunk of the code. If I leave it in, the homepage of the website throws an unexpected T_STRING error. If I remove that chunk of code,

 

onMouseOver="this.style.color='#cc3399';" onMouseOut="this.style.color='#ffffff';"

 

everything appears just fine. The link works, the alt text (or TITLE as I've called it) also works fine...but, obviously, no mouseover changes in color.

 

For what it's worth, that same mouseover code works beautifully on other webpages, like the one at practiceboard.com. But, this index.php file is apparently having some issues with the punctuation, I guess.

 

What am I doing wrong or is there some other way I am to go about this? Any help is much appreciated; I've been Googling all day!

 

Andrea

[jhande]

Hey Andrea,

 

Take a look at this CSS Tutorial - Pseudo Class, it might help get you started on the right track. ;)

[Guest]

Hi Jim:

 

I've run into a lot of tutorials like that Googling today. I'm confused about how to go about it, though.

 

Looks like I need to enter some definitions in my stylesheet, but...even if I used one of the examples on that link you gave me...how do I incorporate that into the actual code in my table? Like, if I added:

 

a:link { 
color: white; 
text-decoration: none; 

}
a:visited { 
color: red; 
text-decoration: none;


}
a:hover {
color: pink; 
text-decoration: none; 

}

 

to my catalog/stylesheet.css file.......what would I do with the original code I was using?

 

I'm stuck on how to 'rewrite' the onMouseOver code itself to reflect or call some stylesheet definition. Any ideas?

[jhande]

Hi Andrea,

 

The style for your links will automatically be called from the stylesheet.css as the code will already be in the HTML/PHP page.

Example - the a in a:link, a:visited, and a:hover found in your style sheet co-insides with the a in <a href="http://handeshobbies.com/catalog" target="_blank">Hande's Hobbies</a> found on your page. So it finds it automatically so-to-speak.

 

onMouseOver and OnMouseOut are javascript functions. The a:hover is a CSS Pseudo-Class replacement which makes it a bit easier to implement and cleaner code in the HTML/PHP file.

 

On your HTML/PHP page you only need your links defined, such as - <a href="http://handeshobbies.com/catalog" target="_blank">Hande's Hobbies</a>

 

Then in your stylesheet.css file you define the style for the different states of the link. Remember to define them in order - link, visited, hover, and active. It is alright to leave one out, such as visited but keep the other three in order.

 

Your stylesheet would have something like this to define your link status:

a:link {

color: #FFFFFF;

text-decoration: none;

}

a:visited{

color: red;

text-decoration: none;

}

a:hover {

color: #CC3399;

text-decoration: none;

}

 

Your original code:

<table width="550" cellspacing="0" cellpadding="6" align="center">

<tr><td style="text-align: center; background: #ff99ff; font-family: arial, helvetica, sans-serif; font-size: 15px; border-right: 3px solid #000000; border-left: 3px solid #000000; border-top: 3px solid #000000; font-weight: bold;"><a href="http://www.mysite.com/product.html" title="Name of Product" style="color: #ffffff; text-decoration: none;" onMouseOver="this.style.color='#cc3399';" onMouseOut="this.style.color='#ffffff';">NAME OF PRODUCT</a></td>

 

Would then look like this:

<table width="550" cellspacing="0" cellpadding="6" align="center">

<tr><td style="text-align: center; background: #ff99ff; font-family: arial, helvetica, sans-serif; font-size: 15px; border-right: 3px solid #000000; border-left: 3px solid #000000; border-top: 3px solid #000000; font-weight: bold;"><a href="http://www.mysite.com/product.html">NAME OF PRODUCT</a></td>

 

You could also cleanup some of the remaining code by including it in the stylesheet. But that's another CSS lesson. :)

Hope that helped? ;)

[Guest]

Hi Jim:

 

Your answer is what I feared, really. LOL. I don't wish to change the mouseover colors for the entire website. I just wish to add a table to the homepage and manipulate the colors of the mouseovers for the links in that table only.

 

If I do as you say, the stylesheet definitions apply to all links in the website, not just my little table for the homepage, right?

 

Here's a little screenshot of what I'm trying to do. It's a table of actors, all with different background colors and assigned mouseover colors for each 'category' in the table. You'll see the one with the alt text that has changed to a darker shade of blue upon being moused over.

 

 

There's no way to insert this into a php file and have this done? I mean, the green column has a dark green mouseover, the blue have darker blue mouseovers as pictured above and so forth.

 

No way to code this into index.php to affect that table only? I appreciate your help, I really do!

 

Andrea

[jhande]

Hey Andrea,

 

Have no fear... :)

I'll help point you in the right direction. I'm just learning about CSS and Stylesheets myself (old dog learning new tricks LOL).

I'm sure there is a way to clean-up and tighten the code a bit, but this will at least get you up and working.

 

I'll use just the actress table for an example, you should be able to adapt it for the actor table.

The effects will only be for this table, not all your links, and each entity can be easily changed.

 

I temporarily posted an example for you to see it in action - http://handeshobbies.com/AndreaTest.html

HTML code for your table:

 

<table class="Actress" width="600" border="2" cellspacing="0" cellpadding="5">
 <tr>
<th class="Actress1" width="200"><div align="center">Lead Actress</div></th>
<th class="Actress2" width="200"><div align="center">Supporting Actress</div></th>
<th class="Actress3" width="200"><div align="center">Younger Actress</div></th>
 </tr>
 <tr>
<td class="Actress1"><div align="center">Crystal Chappell</div></td>
<td class="Actress2"><div align="center">Tracey E. Bregman</div></td>
<td class="Actress3"><div align="center">Vail Bloom</div></td>
 </tr>
 <tr>
<td class="Actress1"><div align="center">Jeanne Cooper</div></td>
<td class="Actress2"><div align="center">Judi Evans</div></td>
<td class="Actress3"><div align="center">?</div></td>
 </tr>
 <tr>
<td class="Actress1"><div align="center">Nicole Forester</div></td>
<td class="Actress2"><div align="center">Kelly Menighan H</div></td>
<td class="Actress3"><div align="center">Rachel Melvin</div></td>
 </tr>
 <tr>
<td class="Actress1"><div align="center">Michelle Stafford</div></td>
<td class="Actress2"><div align="center">Heather Tom</div></td>
<td class="Actress3"><div align="center">Emily O'Brien</div></td>
 </tr>
 <tr>
<td class="Actress1"><div align="center">Maura West</div></td>
<td class="Actress2"><div align="center">Gina Tognoni</div></td>
<td class="Actress3"><div align="center">Tammin Sursok</div></td>
 </tr>
</table>

 

Add this to your stylesheet.css:

 

.Actress {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
font-variant: normal;
color: #FFFFFF;
border: thin;
border-color: #000000; 
}
.Actress1 {
background-color: #FF66FF;
}</P> <P>td.Actress1:hover {
background-color: #CC3399;
color:#FF66FF;
}
th.Actress1 {
background-color: #CC3399;
}
.Actress2 {
background-color: #33CCFF;
}</P> <P>td.Actress2:hover {
background-color: #0066FF;
color: #33CCFF;
}
th.Actress2 {
background-color: #0066FF;
}
.Actress3 {
background-color: #9966FF;
}</P> <P>td.Actress3:hover {
background-color: #6600CC;
color: #9966FF;
}
th.Actress3 {
background-color: #6600CC;
}

 

Hope that helps better! ;)

 

 

[Guest]

Hi Jim: I inserted the stylesheet definitions and slapped your code into my index.php file and all is well except for one thing.

 

All of the actors' names in the table are clickable links designed to pull up a search of all items featuring that performer. So, I take this line of code you gave me (just as an example):

 

<td class="Actress1"><div align="center">Crystal Chappell</div></td>

 

And I add the link so the code now looks something like this:

 

<td class="Actress1"><div align="center"><a href="http://www.mysite.com/blahblahblah" title="Crystal Chappell">Crystal Chappell</a></div></td>

 

And her name in the table now loads as black in color as opposed to white. Making it a link is changing the color of the text in the table.

 

I added links for a few more of the girls in each category and discovered that not only are all of their names changing from white to black onscreen, but...the mouseover color for each is identical. I'm playing with this on a test site and the mouseover color is that grayish-blue color you see all over a default install of OSC.

 

I guess I need something else in the stylesheet that controls the links I'm inserting in the table. White upon view and...whatever color I'd like when moused over. Can you help with that? Thanks so much for all of your help!

 

Andrea

[Guest]

Persistence pays off, I guess!

 

I figured it out.....I took that piece of code you gave me for Actress1, this one:

 

.Actress1 {
background-color: #FF66FF;
}</P> <P>td.Actress1:hover {
background-color: #CC3399;
color:#FF66FF;
}
th.Actress1 {
background-color: #CC3399;
}

 

And I changed it to look like this:

 

.Actress1 {
background-color: #FF66FF;
}
.Actress1 a:link, .Actress1 a:visited {
  color: #ffffff;
  background-color: #FF66FF;
  text-decoration: none;
}
.Actress1 a:hover, Actress1 a:active {
  color: #CC3399;
  background-color: #FF66FF;
}

th.Actress1 {
background-color: #CC3399;
}

 

Does that look sloppy? LOL...it works! I was really puzzled by your test page as it did not work like that on my index page. I had no mouseover highlighting at all until I added a link to the first name in the table. I didn't really want the entire cell highlighted as you had it...just the name. A little tinkering here and there and...bingo! Thank You so much for all of your help, Jim! You're a sweetheart!

 

Andrea

[jhande]

Hey Andrea,

 

You are very welcome! ;)

 

Actually your code looks better than mine and probably the correct way to do it. Been awhile since my CSS introductory course.

 

I wasn't really sure what and how you wanted the hover links to display as, so I added the two options (cell background and text).

Sorry I didn't realize you where creating them as links and that you ran into trouble with them changing color once you did.

 

Do you now have it all fixed up or do you still need some tweaking done?