Can I make a text rollover with it being a graphic?

J

johnsonholding

I want to do a text rollover, without a graphic background or anything.
MAybe like regular to bold text? Is this possible? Thanks
 
M

Mark Parnell

J

johnsonholding

Changing the background would be ok too, but I don't know how to do
that either! But I don't want a graphic at all, I just want the text
and the background colour maybe to change.
 
B

Beauregard T. Shagnasty

Changing the background would be ok too, but I don't know how to do
that either! But I don't want a graphic at all, I just want the text
and the background colour maybe to change.
Click to expand...

Paste this CSS into your page in a <style> block. It's from a site of
mine. If you like it, play with the colors and change to what you like,
but consider that most visitors will be confused if links aren't in
their standard default colors. It's from http://fingerlakesbmw.org/

a {
background-color: transparent;
color: #0000cd; /* blue */
font-size: 100%;
}
a:link {
background-color: transparent;
color: #0000cd; /* blue */
}
a:visited {
background-color: transparent;
color: #800080; /* purple */
}
a.focus {
background-color: #ffffcc;
color: #3399cc;
}
a:hover {
background-color: #ffffcc;
color: #3399cc;
}
 
A

Alan J. Flavell

a:hover {
background-color: #ffffcc;
color: #3399cc;
}
Click to expand...

Just a routine warning that if you use <a name="xxx"> , then (in a
conforming browser, i.e not IE) it's going to respond to hovering,
which probably isn't what you want.

a:link:hover may be a safer selector to use for this, in general.
 
B

Beauregard T. Shagnasty

Alan said:
Just a routine warning that if you use <a name="xxx"> , then (in a
conforming browser, i.e not IE) it's going to respond to hovering,
which probably isn't what you want.

a:link:hover may be a safer selector to use for this, in general.
Click to expand...

Good point, Alan. I rarely use <a name..
 
J

johnsonholding

Also,
I think I am going to try and make the TEXT change color to be on the
safe side - I am guessing this is possible.
I am not using CSS, so can I include it without really know anything
about it?
 
A

Adrienne Boswell

Also,
I think I am going to try and make the TEXT change color to be on the
safe side - I am guessing this is possible.
I am not using CSS, so can I include it without really know anything
about it?
Click to expand...

First, you need to include relavent text in your reply. Although you are
using Google Groups, you can select Options and that will enable you to do
so. Getting a proper news client would, of course, be the best solution of
all.

Now, to your question. Of course, you can include style declarations you
copied from elsewhere, but, you really should do some reading up on it,
only because you may want to change it later.

There are plenty of CSS tutorials. (From one of brucie's lists):
CSS tutorials and other fun 'n giggly css stuff:

http://www.css.nu/
http://www.mako4css.com/
http://www.richinstyle.com/
http://www.blazonry.com/css/
http://www.w3schools.com/css/
http://www.websitetips.com/css/
http://www.htmlhelp.com/reference/css/
http://www.pageresource.com/dhtml/indexcss.htm
http://www.climbtothestars.org/coding/cssbasic/
http://www.htmlcenter.com/tutorials/index.cfm/css/
http://www.freewebmastertips.com/php/content.php3?aid=48
http://www.canit.se/~griffon/web/writing_stylesheets.html
http://www.utoronto.ca/ian/books/xhtml2/exerpt/css-4a.html
http://idm.internet.com/articles/200101/csstutorial1a.html
http://www.greytower.net/en/archive/articles/tsutsumi.html
http://www.westciv.com.au/style_master/academy/css_tutorial/
http://webmonkey.com/authoring/stylesheets/tutorials/tutorial1.html
 
R

Rob McAninch

a:hover {
background-color: #ffffcc;
color: #3399cc; }
Click to expand...

Just a routine warning that if you use <a name="xxx"> [...]

a:link:hover may be a safer selector to use for this, in
general.
Click to expand...

Thanks for pointing that out.

You may also want to use a:visited:hover in this situation, which
will allow you to have the :hover take effect regardless of the
link state.

So for the op:

A:link {text-decoration: underline;
color: #09f;
background: transparent;
}

Then repeat with: visited, link:hover, visited:hover, active in
place of 'link' (in that order). And change the properties
accordingly.
 
J

johnsonholding

Ok, thanks I am starting to get some of it. I noticed it is pretty
complicated, but I am just trying to turn on the underlining when the
mouse moves on it, but have it off before the mouse hits it. Thanks,
you guys have been alot of help so far!
Here is what I have : (alot of it might be wasted because I am not
using it). But so far I have white type, hover - turns black. Now I
just want the links not to be underlined until the mouse goes over it).

<style type="text/css" >
a {
background-color: transparent;
color: #ffffff; /* blue */
font-size: 100%;
}
a:link {
background-color: transparent;
color: #ffffff; /* blue */
}
a:visited {
background-color: transparent;
color: #800080; /* purple */
}
a.focus {
background-color: #554433;
color: #3399cc;
}
a:hover {
background-color:;
color: #000000;
a:link {text-decoration: underline;
color: #000000;
background: transparent;
}

}

</style>
 
J

johnsonholding

Ok, I believe I have figured it out. If there is anyone out there
that's sees something amiss, please let me know, I don't know how to
debug this stuff yet, so I flying by the seat of my pants right now :

<style type="text/css" >
BODY { font-family: verdana, ariel, serif }

a {
background-color: transparent;
color: #ffffff; /* white */
font-size: 9;
}
a:link {text-decoration: none;
background-color: transparent;
color: #ffffff; /* white */
}
a:visited {
background-color: transparent;
color: #800080; /* purple */
}
a.focus {
background-color: #554433;
color: #3399cc;
}
a:hover {text-decoration: underline;
background-color:;
color: #000000;
a:link {text-decoration: underline;
color: #000000;
background: transparent;
}
}
</style>
</head>
 
B

Beauregard T. Shagnasty

Ok, I believe I have figured it out. If there is anyone out there
that's sees something amiss, please let me know, I don't know how to
debug this stuff yet, so I flying by the seat of my pants right now :

<style type="text/css" >
BODY { font-family: verdana, ariel, serif }
Click to expand...

/* ariel is spelled arial; serif should be sans-serif (same style as
arial) and google for why Verdana is a bad idea. */
a {
background-color: transparent;
color: #ffffff; /* white */
font-size: 9;
Click to expand...

9 what? hot dogs? Remove the font-size and assign it in the body
selector, using: ( font-size: 100%; } Only assign different sizes for
headings (larger), and legalese (a bit smaller).
}
a:link {text-decoration: none;
background-color: transparent;
color: #ffffff; /* white */
}
a:visited {
background-color: transparent;
color: #800080; /* purple */
}
a.focus {
background-color: #554433;
color: #3399cc;
}
a:hover {text-decoration: underline;
background-color:;
color: #000000;
Click to expand...

} <-- this brace needs added
a:link {text-decoration: underline;
color: #000000;
background: transparent;
}
Click to expand...

} <-- this brace needs removed and may cause a browser to ignore the
entire style sheet
</style>
</head>
Click to expand...

White links are a very bad idea. Visitors are used to seeing blue links
(unvisited), purple links (visited). Since you didn't assign a body
background color (default normally white), your links would be
invisible.

I got your contact form submission, replying here.
 
B

Beauregard T. Shagnasty

a:hover {text-decoration: underline;
background-color:; <---------- error
color: #000000;
Click to expand...

Whoops. I missed the error here. You removed the color assignment, so
this would fail as well. Browsers have the right to ignore any and all
errors in a stylesheet.
 
R

Rob McAninch

Ok, I believe I have figured it out. If there is anyone out
there that's sees something amiss, please let me know, [...]
Click to expand...
Click to expand...

You may have the best success by authoring a complete external
style sheet, you could leave some stuff out initially, but
putting it in to start with means it's there when you need it.

You might start here:
http://www.w3.org/TR/REC-CSS2/sample.html

Or google and grab a style sheet from a reliable source, then
tweak it till it works. The one above doesn't really touch on
colors. Typically give a background color any time you use color,
'transparent', if you want the background color of the parent
element to show.

I would leave out that section about bidirectional stuff in the
w3 sample.

In any case you can then validate the CSS here:
http://jigsaw.w3.org/css-validator/

You may find some examples here:
http://css.nu/pointers/
But several seemed to be broken.
 
T

Toby Inkster

Ok, thanks I am starting to get some of it. I noticed it is pretty
complicated, but I am just trying to turn on the underlining when the
mouse moves on it, but have it off before the mouse hits it.
Click to expand...

This should do what you want:

<style type="text/css">
a:link {
background-color: transparent;
color: blue;
text-decoration: none;
}
a:visited {
background-color: transparent;
color: purple;
text-decoration: none;
}
a.focus,
a:hover {
background-color: transparent;
color: red;
text-decoration: underline;
}
</style>

though I'd suggest that the following is probably more appropriate:

<style type="text/css">
a:link {
background-color: transparent;
color: blue;
text-decoration: underline;
}
a:visited {
background-color: transparent;
color: purple;
text-decoration: underline;
}
a.focus,
a:hover {
background-color: transparent;
color: red;
text-decoration: none;
}
</style>
 
T

Travis Newbury

I want to do a text rollover, without a graphic background or anything.
MAybe like regular to bold text? Is this possible? Thanks
Click to expand...

With Flash, all things are possible...

(this is a rhetorical post)
 
R

Rob McAninch

a:hover {
background-color: transparent;
color: red;
text-decoration: none;
}
Click to expand...

This will also make <a name="yyy"> take on the hover effect in
compliant browsers. See earlier in the thread about here:
<Pine.WNT.4.64.0601101455360.784@ZORIN>

Also, background: will have better support than background-color:
though more modern browsers may have mitigated this issue.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

A website that I couldn't make a screenshot of it nor save any page from. 1
I want to make such a page in which i can put my excel file. 1
How to make a div select work? 5
How Do I Set text on an Image and use the image as a border? 7
Is it possible an iframe can overlapp another? 3
Batch modifying text - content and context based 5
I am writing a Age of Empires game but it is being played by codes but ı am stuck. 1
Simple Rollover Menu effect 2

Members online

No members online now.
Total: 28 (members: 0, guests: 28)
Robots: 221

Forum statistics

Threads
473,756
Messages
2,569,535
Members
45,008
Latest member
obedient dusk

Latest Threads

Top