The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Need Help ASAP!
Phiz98
post Jan 27 2011, 04:57 PM
Post #1





Group: Members
Posts: 7
Joined: 26-January 11
Member No.: 13,720



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

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jan 28 2011, 02:53 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 28 2011, 09:58 AM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Phiz98
post Jan 28 2011, 10:06 AM
Post #4





Group: Members
Posts: 7
Joined: 26-January 11
Member No.: 13,720



This is the URL:

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

Thanks in advance!!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Phiz98
post Jan 28 2011, 10:30 AM
Post #5





Group: Members
Posts: 7
Joined: 26-January 11
Member No.: 13,720



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>



User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 28 2011, 11:16 AM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Phiz98
post Jan 28 2011, 11:34 AM
Post #7





Group: Members
Posts: 7
Joined: 26-January 11
Member No.: 13,720



Hmm.... Is there a way to do that in JavaScript and have it work in all browsers?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jan 29 2011, 05:27 AM
Post #8


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 02:55 AM