Need Help ASAP! |
Need Help ASAP! |
Phiz98 |
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!! |
Frederiek |
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.
|
pandy |
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?
|
Phiz98 |
Jan 28 2011, 10:06 AM
Post
#4
|
Group: Members Posts: 7 Joined: 26-January 11 Member No.: 13,720 |
|
Phiz98 |
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 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
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.
|
Phiz98 |
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?
|
Frederiek |
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.
|
Lo-Fi Version | Time is now: 28th March 2024 - 02:55 AM |