Help - Search - Members - Calendar
Full Version: Need Help ASAP!
HTMLHelp Forums > General Interest > Jobs Seeking Programmers
Phiz98
Jan 27 2011, 04:57 PM
Hey guys,

I am very very new to making websites and have no idea what i am doing. I was able to get everything working (not how I want it exactly) on every browser except Internet Explorer.

I will gladly compensate anyone who is willing to fix that problem and also modify it a bit.

Right now I am able to get thumbnails to display and when you mouseover them, they appear fullsize on the right. When you scroll off the thumbnail it goes back to the original image. I would love to have the mouseover thumbnail to remain fullsize on the right until you mouseover a different thumbnail, then that one stays till you mouseover another...etc.

Can anyone help me? Let me know what you need and how much compensation. Thanks in advance!!

Frederiek
Jan 28 2011, 02:53 AM
For your thumbnail issue, go see http://www.cssplay.co.uk/menu/double-click...y-vertical.html or any other item listed under Photo Galleries at http://www.cssplay.co.uk/menu/ that suits you.
pandy
Jan 28 2011, 09:58 AM
Phiz98, if you can show us what you have now, maybe we can help you modify it to do what you want. Can you post the URL to your page?
Phiz98
Jan 28 2011, 10:06 AM
This is the URL:

http://ashleydsurber.com/Ashley_Surber/Work.html

Thanks in advance!!
Phiz98
Jan 28 2011, 10:30 AM
Because I am completely clueless I am using iWeb to make the site. They have an HTML snippet widget that you can input your own code.

The rest of the website works fine in IE just not this section.

Again, I will gladly pay someone if they can help me out smile.gif

This is the code I used for the images:

<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>



pandy
Jan 28 2011, 11:16 AM
Ah. iWeb has done it with CSS. I was hoping for JavaScript since that would be easy to change. CSS basically can't do what you want since there is nothing corresponding to onclick. Nevertheless Stu Nicholls has managed to do it on the page Frederiek linked to, but alas whatever he's done doesn't work in all browsers.
Phiz98
Jan 28 2011, 11:34 AM
Hmm.... Is there a way to do that in JavaScript and have it work in all browsers?
Frederiek
Jan 29 2011, 05:27 AM
Stu Nicholls also has a web site where he uses CSS & Javascript. His Simple Gallery looks like what you want : http://www.stunicholls.com/gallery/simple.html . Just click the thumbnails. Or have a look in the Gallery section for other samples.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2013 Invision Power Services, Inc.