I'm Lost!

Phiz98

Hey Guys!

I am VERY new to this. I am making a website and I found a css code that is close to what I would like for an image gallery.

I have 2 problems:

I would like to alter it to when you rollover a thumbnail, the big image stays as that even when you roll off of it, but changes only when you rollover a different thumbnail and then the big image stys as that etc.

The other issue, is that this code works in FireFox, Safari, Opera, Google Chrome, but NOT in Internet Explorer. Is there something I can do to get it to work in all browsers?

For anyone that can help me fix these 2 problems, I will gladly compensate you!! I am desperate! 🙂

This is the code I am using:

<html>
<head>
<link rel="stylesheet" href="styles.css" type="text/css" media="print" />
<head>
<body>
<div style="position:absolute;top:-10px;left:509px;"><img src="http://ashleydsurber.com/Ashley_Surber/Pictures/ADS_1.jpg" style="height:530px;width:355px;"></div>
<style type="text/css">
img.mini {border:none}
div#minis a img.big {height: 0; width: 0; border-width: 0}
div#minis a:hover img.big {position:absolute;top:-10px;left:509px;height:530px;width:355px;border:none; text-decoration:none;}
div#minis a img.mini {height: 85px; width: 60px; border-width: 0}
</style>
<div id="presentation" style="width:850;height:525px;">

<br>
<div id="minis" class="minislinks" style="margin-left:28px; margin-top:0px;">

<a class="photo" ><img class="mini" src="http://ashleydsurber.com/Ashley_Surber/Pictures/ADS_1.jpg" alt="Name" /><img class="big" src="http://ashleydsurber.com/Ashley_Surber/Pictures/ADS_1.jpg" /></a>

<br>
<div id="minis" class="minislinks" style="margin-left:120px; margin-top:-87px;">

<a class="photo" ><img class="mini" src="http://ashleydsurber.com/Ashley_Surber/Pictures/ADS_2.jpg" alt="Name" /><img class="big" src="http://ashleydsurber.com/Ashley_Surber/Pictures/ADS_2.jpg" /></a>

<br>
<div id="minis" class="minislinks" style="margin-left:120px; margin-top:-87px;">

<a class="photo" ><img class="mini" src="http://ashleydsurber.com/Ashley_Surber/Pictures/ADS_3.jpg" alt="Name" /><img class="big" src="http://ashleydsurber.com/Ashley_Surber/Pictures/ADS_3.jpg" /></a>

<br>
<div id="minis" class="minislinks" style="margin-left:120px; margin-top:-85px;">

<a class="photo"><img class="mini" src="http://ashleydsurber.com/Ashley_Surber/Pictures/ADS_4.jpg" alt="Name" /><img class="big" src="http://ashleydsurber.com/Ashley_Surber/Pictures/ADS_4.jpg" /></a>


<br>
<div id="minis" class="minislinks" style="margin-left:-360px; margin-top:30px;">

<a class="photo"><img class="mini" src="http://ashleydsurber.com/Ashley_Surber/Pictures/ADS_5.jpg" alt="Name" /><img class="big" src="http://ashleydsurber.com/Ashley_Surber/Pictures/ADS_5.jpg" /></a>

<br>
<div id="minis" class="minislinks" style="margin-left:120px; margin-top:-87px;">


<a class="photo" ><img class="mini" src="http://ashleydsurber.com/Ashley_Surber/Pictures/ADS_6.jpg" alt="Name" /><img class="big" src="http://ashleydsurber.com/Ashley_Surber/Pictures/ADS_6.jpg" /></a>

<br>
<div id="minis" class="minislinks" style="margin-left:120px; margin-top:-87px;">

<a class="photo"><img class="mini" src="http://ashleydsurber.com/Ashley_Surber/Pictures/ADS_7.jpg" alt="Name" /><img class="big" src="http://ashleydsurber.com/Ashley_Surber/Pictures/ADS_7.jpg" /></a>

<br>
<div id="minis" class="minislinks" style="margin-left:120px; margin-top:-87px;">

<a class="photo" ><img class="mini" src="http://ashleydsurber.com/Ashley_Surber/Pictures/ADS_8.jpg" alt="Name" /><img class="big" src="http://ashleydsurber.com/Ashley_Surber/Pictures/ADS_8.jpg" /></a>

<br>
<div id="minis" class="minislinks" style="margin-left:-360px; margin-top:30px;">

<a class="photo" ><img class="mini" src="http://ashleydsurber.com/Ashley_Surber/Pictures/ADS_9.jpg" alt="Name" /><img class="big" src="http://ashleydsurber.com/Ashley_Surber/Pictures/ADS_9.jpg" /></a>

<br>
<div id="minis" class="minislinks" style="margin-left:120px; margin-top:-87px;">

<a class="photo"><img class="mini" src="http://ashleydsurber.com/Ashley_Surber/Pictures/ADS_10.jpg" alt="Name" /><img class="big" src="http://ashleydsurber.com/Ashley_Surber/Pictures/ADS_10.jpg" /></a>

<br>
<div id="minis" class="minislinks" style="margin-left:120px; margin-top:-87px;">

<a class="photo" ><img class="mini" src="http://ashleydsurber.com/Ashley_Surber/Pictures/ADS_11.jpg" alt="Name" /><img class="big" src="http://ashleydsurber.com/Ashley_Surber/Pictures/ADS_11.jpg" /></a>

<br>
<div id="minis" class="minislinks" style="margin-left:120px; margin-top:-87px;">

<a class="photo"><img class="mini" src="http://ashleydsurber.com/Ashley_Surber/Pictures/ADS_12.jpg" alt="Name" /><img class="big" src="http://ashleydsurber.com/Ashley_Surber/Pictures/ADS_12.jpg" /></a>

<body>
<html>

Thanks in advance!!!!!!!!

dalecosp

Hello! Welcome to PHPBuilder!

There are a couple of things I would recommend that you do ... fairly quickly. One, wrap your code section in (MOD EDIT: Use HTML tags, not the generic CODE tags!)[noparse]

[/noparse] tags ... for easier viewing and to keep the thread page "neat". Next, you might want to change those URI's visible in your code to "example.com".... just sayin' ... but not everyone who browses these forums has honorable intent, y'know?

As for this:

Is there something I can do to get it to work in all browsers?

There might be. The one I'd just love to see you do, though, is to buy a controlling interesting in a certain Pacific Northwest software company and fire some lamebrains 😃

Phiz98

Thanks for adding the HTML tags! Like I said I am new to this 🙂

dalecosp: GREAT suggestion on the IE fix, but unfortunately I don't have the funds 🙂

Does anyone know of another alternative?

Thanks again!

dalecosp

"Another alternative" ... it depends on what needs fixing. There is a thread, not very old, in this very subforum where we discussed a few ways of dealing with IE....

johanafm

The first item on your list makes the second one irrelevant. Presently you are using the pseudoclass :hover, which corresponds to "any element indicated by the user without selecting (cliking on) that element". This also means that you cannot use :hover if you want to keep the enlarged image when the mouse pointer leaves the image.

To achieve this, you'd have to resort to javascript. If you cannot get your javascript code to work in all browsers, post back again.

Phiz98

Thank you for your reply johanafm!! Would you be willing to write the javascript? I know nothing and would gladly pay you for the javascript! Let me know! Thank you johanafm!