content change on hover, set a default display?

[Kabney]

I made some display content changes on hover (text and a rollover image) However, I need one of the links to be displaying by default when the page comes up otherwise nothing is there. (It is product logos with product info that displays below) The trick is though, I need the default display to go away when another one of the links are hovered over as that content then takes the place of the other content. Make sense?

Is there anyway to accomplish this using CSS? It looks and works great and I would like to not use Javascript if at all possible.
Thanks so much!!

[auntnini]

See for examples http://oksenhendler.webs.com/generic...leCutPlus.html

Insert image. Name image (e.g. holder), then use JavaScript onmouse over or onclick to change source of large image

[Kabney]

I already have the hover (mouse over) changing just using CSS. Is there anyway not to use Javascript to get a default image to stay up? It is very similar to this http://meyerweb.com/eric/css/edge/popups/demo.html but I just need at least one of the items to stay "on" as if they are hovered so some content is displayed.
Thanks for the suggestion!

[auntnini]

Ah, Eric Meyers hover <SPAN>. I used that at http://www.chanit.com/gallery/floral.htm.

It's hard to visualize your page without "full disclosure" (CSS, HTML code). I don't think you can use the hover <SPAN> the way you suggest because the trick with that is to change content of <SPAN>'s display from none to block (or visibility from hidden to visible). But I'm trying to visualize some way to assign background image to different anchor pseudo states (a, a:link, a:visited, a:focus, a:hover, a:active) that would change.

Anyone else have any ideas?

[auntnini]

Since the Eric Meyers example uses position: absolute and Z-INDEX, could you do something with position:relative (tying the span to the relative element) of specific area with a lesser Z-INDEX ?

div#links a:hover span {display: block;
   position: absolute; top: 200px; left: 0; width: 125px;
   padding: 5px; margin: 10px; z-index: 100;
   color: #AAA; background: black;
   font: 10px Verdana, sans-serif; text-align: center;}

At http://www.auntnini.com the pop-up <SPAN>s were tied to links

<li class="button" id="sketch">
	<a href="sketch/index.htm">Sketch<span>life drawings</span></a>	</li>

	<li class="button" id="flash">
	<a href="vectorFlash/index.html">Vector&nbsp;/&nbsp;Flash<span> in the works</span></a>	</li>
	<li class="button" id="new">
	<a href="new/index.htm">New&nbsp;Stuff<span>digital art stuff</span></a>	</li>

[Kabney]

I used another span to change the rollover image using position and z-index as you mentioned. It works beautifully. So basically there is always a hover state active on one item, then when you rollover another item, the span image covers up (z-index and positioning) what would be the active hover state with the span image. It seem very simple once you figure it out, I think I was trying to make it harder than it was. thanks for your help!