I'm trying the Dynamic Drive Popup Image Viewer http://www.dynamicdrive.com/style/cs...e-viewer/P230/ to show photos of menu items for a restaurant: http://truethairestaurant.com/menuTabs.htm. I also happen to be trying the Spry Tabbed Panels in Dreamweaver CS3.

The photos seem to be working reasonably well (except in Opera). The viewer is supposed to hover over the link which is just a text link to see the photo. This works ok. If by chance the viewer were to click on the link, the text link changes to a dark font color. It's supposed to be yellow. I've tried all kinds of things to try to keep the text yellow if someone clicks on it by mistake. I tried adding .thumbnail a: visited with a yellow font to see if that would work. No luck. I can't figure out where to create a style for a situation in which someone is doing something they're really not supposed to ie. click instead of hover.

If you go to the web page, you need to scroll down a little because I only have photos for a few of the items. If you click on one of the "photo" links you'll see what I mean.

Code:
.thumbnail {
	color:#FFBC01;
	width: 2.5em;
	background:#626E2C;
	font-weight:normal;
	font-size:0.8em;
	text-decoration:none;
	border: 2px solid #630000;
	padding: 0 2px 0 2px;
	white-space:nowrap;
	/*display:block;*/
}


.thumbnail:hover{
	position:relative;
	background:#FFBC01; 
	color:#630000;
	/*background-color: transparent;*/
	z-index: 50;
 
}

.thumbnail a:visited {
	color:#ffbc01;
}


.thumbnail span{ /*CSS for enlarged image*/
	position: absolute;
	color:#FFBC01;
	background: #626E2C;
	font-size:1.2em;
	font-weight:bold;
	padding:5px;
	left: -1000px;
	border:solid 3px #630000;
	display:none;
}

.thumbnail span img{ /*CSS for enlarged image*/
	padding:2px;
	border: 0;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
	display:block;
	top:-100px;
	z-index: 50;
	left: 50px;
	
}
HTML for 2 items with photo links:

HTML Code:
<h2>Fried Corn Cakes <a class="thumbnail" href="#thumb"> photo <span><img src="images/menu/CornCakes.jpg" alt="Fried Corn Cakes" /><br />Fried Corn Cakes</span></a></h2>
        <div class="description_1">Excellent by themselves, even better with our piquant dipping sauce.</div>
        <div class="clear"></div>
        <div class="description"> Six to an order</div>
        <div class="price">$5.50</div>
        <div class="dots">&nbsp;</div>


        <h2>Thai Omelette <a class="thumbnail hoverlink" href="#thumb"> photo <span><img src="images/menu/ThaiOmelette.jpg" alt="Thai Omelette" /><br /> Thai Omelette</span></a></h2>
        <div class="description_1">You simply won't believe how tasty eggs can be until you try this traditional Thai egg dish. Comfort food served with rice.</div>
        <div class="clear"></div>
        <div class="description">Vegetarian </div>
        <div class="price">$8.95</div>
        <div class="dots">&nbsp;</div>
        <div class="description">Chicken, Beef or Pork </div>
        <div class="price">$9.95</div>
        <div class="dots">&nbsp;</div>
        <div class="description">Shrimp</div>
        <div class="price"> $10.95</div>
        <div class="dots">&nbsp;</div>
As for Opera, the photo breaks up or just doesn't show up. There is a fix to use display:block for the text link, but I don't want the link to drop to the next line. I tried display:inline-block but Opera doesn't seem to get what I want to do. I then tried a hack to make something visible only to Opera,

@media screen and (min-width: 0px){
.thumbnail {display:block;}


but it appears the Safari 3 sees this and then it displays in a way I don't want it to.

Any ideas on this?

Thanks much for the help.