The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V  1 2 >  
Reply to this topicStart new topic
> Rollover Link Box, How to create a rollover link box?
Dante Monaldo
post Nov 15 2009, 02:20 PM
Post #1


Advanced Member
****

Group: Members
Posts: 124
Joined: 22-March 09
From: California, USA
Member No.: 8,132



Does anyone know how I would create a menu with rollover link boxes to look like the one found on http:? It would also be great if i could do it all in one HTML file.

Thanks!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
rcanpolat
post Nov 15 2009, 03:03 PM
Post #2


Member
***

Group: Members
Posts: 76
Joined: 4-August 09
Member No.: 9,327



you could try stick this in an i-frame. i dont know though - im not really a code junky


CODE
<script type="text/javascript">
function mouseOver()
{
document.rollover_one.src ="http://url/to/rollover-image"
}
function mouseOut()
{
document.rollover_one.src ="http://url/to/normal-image"
}
</script>
<a href="http://link.com">
<img alt="Link Title" src="http://url/to/normal-image" name="rollover_one" width="103" height="34" onmouseover="mouseOver()" onmouseout="mouseOut()" style="border: none;"/></a>

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dante Monaldo
post Nov 15 2009, 03:07 PM
Post #3


Advanced Member
****

Group: Members
Posts: 124
Joined: 22-March 09
From: California, USA
Member No.: 8,132



It worked, but I was leaning more to a way that would simply change the colors, that way I don't have to create images and wait for them to load.

Do you know how I would do it simply with colors and not images?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 15 2009, 04:53 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



The two links at top where it says "Home" and "Partners"? You could do it with CSS. Change the backgound color on hover.

CODE
#menu a       { background: black; color: white }
#menu a:hover { background: red }


HTML
<div id="menu">
<a href="http://google.com">Google</a>
<a href="http://yahoo.com">Yahoo!</a>
<div>


http://www.w3.org/TR/CSS2/selector.html#dy...-pseudo-classes
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dante Monaldo
post Nov 15 2009, 09:26 PM
Post #5


Advanced Member
****

Group: Members
Posts: 124
Joined: 22-March 09
From: California, USA
Member No.: 8,132



Thanks, it worked!

But now I have another problem. When I hover over a link, it highlights it red, but there is also a gray line above it, between the red and the black. How would I fix this and make it even?

Also, I would like the links to be spread out across the table. I tried <div="justify"> but that makes the links look like they are aligned left.

I would really appreciate the help. You can check out the site at http://www.priceprospector.com/testing.html.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 15 2009, 10:15 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Odd that justify does nothing. I would have expected it to spread out, not the links, but the words. unsure.gif

Anyway, try this.

CODE
#menu a { background: #848484; color: white;
          width: 20%; float: left; text-align: center }


Inline elements like A can't have a width. Hence the float. A floated box is automatically block, sort of. The 'text-align: center' is to center the link text inside each A box, not to center the A boxes themselves.

Oh, I don't see the gray line. What browser?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 15 2009, 10:26 PM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



In IE6 (don't know about other IE) the links are scrambled up to the left, both as you have it now and with the new CSS above. The cause of that is mainly that you have set the width of the TD that contains the links to something way to small. Remove the width altogether. There's still some oddness in IE6, but I don't see what the problem is right off and have to go to bed now. I'll look closer tomorrow. It will be fine in other browsers anyway.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dante Monaldo
post Nov 15 2009, 11:58 PM
Post #8


Advanced Member
****

Group: Members
Posts: 124
Joined: 22-March 09
From: California, USA
Member No.: 8,132



I have been using Firefox, but anyways, do you know of a way to create <id="current"> when you are using highlights? Please nothing with a:visited, but that way my visitors will know what page they are on. Talk to you tomorrow!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 16 2009, 05:37 AM
Post #9


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Give BODY a uniqe ID on every page. Say you call them #home, #templates, #contact and so on. You also need to give each menu link an id. Let's call them #home-link, #templates-link and #contact-link. Then you go...

#home #home-link, #templates #templates-link, #contact #contact-link
{ /*styling for current page link */ }
http://www.w3.org/TR/CSS2/selector.html#descendant-selectors

IMO the "link" to the current page shouldn't be a link. But that you can't do with CSS.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dante Monaldo
post Nov 16 2009, 11:30 AM
Post #10


Advanced Member
****

Group: Members
Posts: 124
Joined: 22-March 09
From: California, USA
Member No.: 8,132



I just gave the BODY a unique id with <body id="home"> for my home page. I am not using an unordered list, so I don't know where I would put the id for each link. I really appreciate the help.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 16 2009, 01:01 PM
Post #11


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



<a href="blah.html" id="blah"> smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dante Monaldo
post Nov 16 2009, 07:50 PM
Post #12


Advanced Member
****

Group: Members
Posts: 124
Joined: 22-March 09
From: California, USA
Member No.: 8,132



I added the <id="home"> to one of my links, but it didn't do anything. Then I tried adding
CODE
#menu a:home { color: yellow }
into my <style> in the header, but it still didn't change. What am I doing wrong?

This post has been edited by Dante Monaldo: Nov 16 2009, 07:56 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 16 2009, 08:03 PM
Post #13


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



You wrote a colon where there shouldn't be one.

It's a#home or just #home.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dante Monaldo
post Nov 16 2009, 08:17 PM
Post #14


Advanced Member
****

Group: Members
Posts: 124
Joined: 22-March 09
From: California, USA
Member No.: 8,132



I changed it on a copy of the site on my desktop, but nothing happened. Here is the code for the style:

CODE
     <STYLE TYPE="text/css">
     body,table { margin: 0; padding: 0; }
     a:link { color: blue; text-decoration: none }
     a:active { color: red; text-decoration: none }
     a:visited { color: blue; text-decoration: none }
     a:hover { color: green; text-decoration: none }
    
     #menu a { background: #848484; color: black }
     #home { color: yellow }
     #menu a:hover { background: #FFFFFF }
     </STYLE>


And here is the code for the links:
CODE
     <b><a href="http://google.com">Home</a>
     <a href="http://yahoo.com" id="home">Free Templates</a>
     <a href="http://yahoo.com">Contact Us</a>
     <a href="http://yahoo.com">Website Hosting</a>
     <a href="http://yahoo.com">Contact Us</a></b>


I really appreciate the help!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 16 2009, 08:59 PM
Post #15


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



The Yahoo!-link is yellow.

But what are you trying to do now? The point of giving the links an id is to use it together with the id for BODY.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dante Monaldo
post Nov 16 2009, 09:04 PM
Post #16


Advanced Member
****

Group: Members
Posts: 124
Joined: 22-March 09
From: California, USA
Member No.: 8,132



I am not sure what browser you are looking at this in, but in Firefox and IE, the link hasn't changed.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 16 2009, 09:12 PM
Post #17


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Then your actual code isn't the same as what you pasted above.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dante Monaldo
post Nov 16 2009, 09:17 PM
Post #18


Advanced Member
****

Group: Members
Posts: 124
Joined: 22-March 09
From: California, USA
Member No.: 8,132



I am obviously very confused, so below is the code, and if you could change it and tell me what you did, that would be great.

CODE
<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="AUTHOR" content="Dante Monaldo">
<meta name="KEYWORDS" content="replace, these, words, that, describe, your, site, and, page, contents, separated, by, commas">
<meta name="DESCRIPTION" content="Here is where you put a short sentence or two describing this page and it's goals">
<title>Dark Age Templates.com</title>
     <STYLE TYPE="text/css">
     body,table { margin: 0; padding: 0; }
     a:link { color: blue; text-decoration: none }
     a:active { color: red; text-decoration: none }
     a:visited { color: blue; text-decoration: none }
     a:hover { color: green; text-decoration: none }
    
     #menu a { background: #848484; color: black }
     #home { color: yellow }
     #menu a:hover { background: #FFFFFF }
     </STYLE>
</head>

<body bgcolor="#A4A4A4" id="home">

<div align="center">
  <table border="0" cellpadding="0" cellspacing="0" width="1020" height="110">
    <tr>
     <td width="260" valign="center" align="center" bgcolor="#000000" height="110">
     <p><image src="cooltext440295374.jpg" alt="Dark Ages Templates.com Logo"</p>
     </td>
     <td width="760" valign="center" align="center" bgcolor="#000000" height="110">
    <p><script type="text/javascript"><!--
    google_ad_client = "pub-4828388096208010";
    /* 728x90, created 11/14/09 */
    google_ad_slot = "6184423822";
    google_ad_width = 728;
    google_ad_height = 90;
    //-->
    </script>
    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script></p>
    </td>
    </tr>
  </table>
  <table border="0" cellpadding="0" cellspacing="0" width="1020" >
    <tr>
     <td width="1020" valign="center" align="center" bgcolor="#848484">
     <font color="000000" size="5">
     <div id="menu" align="center">
     <b><a href="http://google.com">Home</a>
     <a href="http://yahoo.com" id="home">Free Templates</a>
     <a href="http://yahoo.com">Contact Us</a>
     <a href="http://yahoo.com">Website Hosting</a>
     <a href="http://yahoo.com">Contact Us</a></b>
     </div>
     </font>
     </td>
    </tr>
  </table>
</div>
    
<div align="center">
  <table border="0" cellpadding="0" cellspacing="0" width="1020">
   <tr>
    <td width="1020" height="524" valign="top" bgcolor="#FFFFFF"
    
     </td>
     </tr>
    </table>
</div>

</body>

</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 16 2009, 09:48 PM
Post #19


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



You use the same id twice. An id is supposed to be unique, it can only occur once in a document. This time it seems browsers choose to use the first instance and ignore the second.

HTML
<body bgcolor="#A4A4A4" id="home">

HTML
<a href="http://yahoo.com" id="home">Free Templates</a>



You should use a doctype. Firstly, it enables you to validate. The validator would have told you about the duplicate id. Secondly, if you choose the right doctype browsers will be in Standards Mode. Without doctype they are in Quirks Mode. That means they emulate older and buggier versions of themselves. You don't want that.

You have other errors too, so use that validator. wink.gif

http://htmlhelp.com/tools/validator/doctype.html
http://htmlhelp.com/tools/validator/
http://hsivonen.iki.fi/doctype/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dante Monaldo
post Nov 16 2009, 10:01 PM
Post #20


Advanced Member
****

Group: Members
Posts: 124
Joined: 22-March 09
From: California, USA
Member No.: 8,132



Man, this is driving me crazy! I just took the body id tag out all together, and nothing happened! I am sorry that I am frustrated, but this seems to be taking forever!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

2 Pages V  1 2 >
Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th March 2024 - 10:26 AM