ANyway to do this rollover with CSS?

Mr. Clean

I have two images in a rollover:

http://www.austinmetrobaseball.com/i...ivmenu_red.gif
and
http://www.austinmetrobaseball.com/i...vmenu_blue.gif

I'd like to be able to do that type of rollover with CSS only.

I'm pretty sure it can be done with two spans in the li but can't
get anything to work.

Can anyone help???

Jul 20 '05 #1

Subscribe Reply

2222

Evertjan.

Mr. Clean wrote on 22 aug 2003 in
comp.infosystem s.www.authoring.stylesheets:

I have two images in a rollover:

http://www.austinmetrobaseball.com/i...ivmenu_red.gif
and
http://www.austinmetrobaseball.com/i...vmenu_blue.gif

Jul 20 '05 #2

Mr. Clean

In article <Xn************ ********@194.10 9.133.29>,
ex************* *@interxnl.net says...

Mr. Clean wrote on 22 aug 2003 in
comp.infosystem s.www.authoring.stylesheets:
I have two images in a rollover:

http://www.austinmetrobaseball.com/i...ivmenu_red.gif
and
http://www.austinmetrobaseball.com/i...vmenu_blue.gif

<style>
a#austin{
background:url
("http://www.austinmetro baseball.com/images/austindivmenu_r ed.gif");
display: block;height:30 0px;width:600px ;}
a#austin:hover{
background:url
("http://www.austinmetro baseball.com/images/austindivmenu_b lue.gif");}
</style>

<a href="#" id="austin">
</a>
IE6 tested

This does, however, get rid of my jvascript rollovers for this menu but I
really would like a text only menu....

Jul 20 '05 #3

Keith Duncan

----- Original Message -----

I have two images in a rollover:

http://www.austinmetrobaseball.com/i...ivmenu_red.gif
and
http://www.austinmetrobaseball.com/i...vmenu_blue.gif

I'd like to be able to do that type of rollover with CSS only.

Normally I wouldnt post code, but seeing as its short:
<html>
<head>
<style type="text/css">

</style>
</head>

<body>
<p class="blue" onmouseover="th is.className='r ed';two.classNa me='blue'"
onmouseout="thi s.className='bl ue';two.classNa me='red'" >Austin</p>
<p class="red" id="two">28+</p>
</body>
</html>

You will obv need to tailor to suit your own needs...inc Doctype etc.. also
should check browser compatibility - seems to work ok for IE6
;-)

--
Keith

Jul 20 '05 #4

Keith Duncan

> ----- Original Message -----

Normally I wouldnt post code, but seeing as its short:
....slightly modified version:
<body>
<p class="blue" id="one"
onmouseover="th is.className='r ed';two.classNa me='blue'"
onmouseout="thi s.className='bl ue';two.classNa me='red'" >Austin</p>
<p class="red" id="two"
onmouseover="th is.className='b lue';one.classN ame='red'"
onmouseout="thi s.className='re d';one.classNam e='blue'">28+</p>
</body>

;-)

--
Keith

Jul 20 '05 #5

Evertjan.

Keith Duncan wrote on 23 aug 2003 in
comp.infosystem s.www.authoring.stylesheets:

onmouseover="th is.className='r ed';two.classNa me='blue'"

I thought the OQ specified "no javascript" ?

Anyway, it is a very nice solution.
If js is in anyway:

=============== ============

<style type="text/css">

</style>

<script type="text/javascript">

</script>

<span id="changespan "
onmouseover=cha ngeClass("over" ) onmouseout=chan geClass("out")>
<span class="blue" id="one">Austin </span>
<span class="red" id="two">28+</span>
</span>
=============== ========

IE6 tested

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Jul 20 '05 #6

Mr. Clean

In article <Xn************ *******@194.109 .133.29>,
ex************* *@interxnl.net says...

Mr. Clean wrote on 22 aug 2003 in
comp.infosystem s.www.authoring.stylesheets:
> http://www.austinmetrobaseball.com/i...ivmenu_red.gif a#austin:hover{ background:url
("http://www.austinmetro baseball.com/images/austindivmenu_b lue.gif");}
</style>

This does, however, get rid of my jvascript rollovers for this menu
but I really would like a text only menu....

I fail to understand what you mean,
as you supplied the images yourself and did not mention a menu.

I'd like to have a CSS rollover that is text only that LOOKS like
the two images.

The word Austin in Red and 28+ in blue on normal state and the
word Austin in blue and 28+ in red in the rollover state with
ONE link.

Jul 20 '05 #7

Chris Morris

Mr. Clean <mr*****@protct orandgamble.com > writes:

I'd like to have a CSS rollover that is text only that LOOKS like
the two images.

The word Austin in Red and 28+ in blue on normal state and the
word Austin in blue and 28+ in red in the rollover state with
ONE link.

<a href="..." class="decor">A ustin <span>28+</span></a>

a.decor:link { color: #ff0000; background: #ffffff; }
a.decor:hover { color: #0000ff; background: #ffffff; }

a.decor:link span { color: #0000ff; background: #ffffff; }
a.decor:hover span { color: #ff0000; background: #ffffff; }

Similar properties needed for :visited.

There's various ways to get the line break in.

a.decor span { display: block; }
or
a.decor span:before { content: "\A"; }
or
put a <br> before the <span>

Browser support varies from option to option.

--
Chris

Jul 20 '05 #8

Mr. Clean

In article <87************ @dinopsis.dur.a c.uk>, c.********@durh am.ac.uk says...

Mr. Clean <mr*****@protct orandgamble.com > writes:
I'd like to have a CSS rollover that is text only that LOOKS like
the two images.

The word Austin in Red and 28+ in blue on normal state and the
word Austin in blue and 28+ in red in the rollover state with
ONE link.

<a href="..." class="decor">A ustin <span>28+</span></a>

a.decor:link { color: #ff0000; background: #ffffff; }
a.decor:hover { color: #0000ff; background: #ffffff; }

a.decor:link span { color: #0000ff; background: #ffffff; }
a.decor:hover span { color: #ff0000; background: #ffffff; }

Similar properties needed for :visited.

There's various ways to get the line break in.

a.decor span { display: block; }
or
a.decor span:before { content: "\A"; }
or
put a <br> before the <span>

Browser support varies from option to option.

Thanks a million, that is going to work perfectly and cut down on
some of my bandwidth...

Jul 20 '05 #9

Similar topics

1957

java-script for DreamWeaver MX RollOver buttons and FireFox

by: Leythos | last post by:

I've got several sites that I used DreamWeaver MX to add RollOver buttons to the pages, it also adds some javascript that pre-loads the images and does the mouse_over and such. In FireFox 1.0.1 when I load the page and it pre-loads the images the status bar shows DONE. When I mouse over any item, it changes the image properly, but the status (lower left of browser) shows "Read www.somesite.com", it may also show "Waiting for...

Javascript

5180

Image rollover not working in a table

by: jedbob | last post by:

I used Adobe Imageready to build a simple rollover navigation bar, where the text will change color on a mouse over. The working example can be found at: http://www.akujunkan.com/test/NavBar.html However, when I try to incorporate the javascript and code into another table, the rollover stops working: http://www.akujunkan.com/test/index.html

HTML / CSS

2723

How to do rollover with dynamic text?

by: JOSEPHINE ALVAREZ | last post by:

I have this code that I want to use to do a rollover. However, because the company I am doing it for is continually changing the text, I want to be able to use dynamic text to change the text on the fly, and still have the rollover work. I have taken the text off of the buttons, but cannot figure out how to do it with dynamic text using javascript and html. For example, in the columns of this row, I want to put "About...

Javascript

7630

Simulating rollover effects

by: Lauren Quantrell | last post by:

I have constructed the following code that simulates the common rollover effect when moving the mouse over a label (this example makes the label bold.) I'm wondering if anyone has come up with a better solution. lq 'start code:

Microsoft Access / VBA

2066

adding rollover button to .aspx page

by: Mike P | last post by:

what is the syntax for adding a rollover button as an image button? I have saved the button as a .swf file and put it as the ImageUrl, but since it isn't an image, do I need to save it as an image in flash rather than a button? Cheers, Mike

ASP.NET

1472

Any reason for no rollover controls in .NET 2.0?

by: Rob R. Ainscough | last post by:

Just curious why a VERY commonly used affect of rollover was NOT implemented in .NET 2.0 for web controls? Does anyone have a link to VB code that will show me how to build my own UserControl that will support a rollover? thanks, Rob.

ASP.NET

3444

Pure CSS Image Rollover Menus?

by: Casimir | last post by:

I am looking into making pure CSS image rollovers. Do you have any clever (and robust) CSS rollover-tricks? Or links to such "in the wild"? I have figured out two methods for this, but have yet to do proper testing on browser support. Method I:

HTML / CSS

2735

Rollover asp.net Button

by: Oriane | last post by:

Hi there, I would like to handle a "rollover" <asp:Buttonin the code behind with C# with this kind of code: Button btn = Page.FindControl("Button" + numWidget) as Button; btn.Attributes = "document.all." + btn.ClientID + ".src = '/Images/blue.gif'";

ASP.NET

9636

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

9931

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

8961

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

7485

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

6727

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

5373

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

5504

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

3632

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

2869

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General