HTML, JavaScript And CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
 
 
User Name:
Password:
Remember me
Go Back   ASP Free Forums > Programming > HTML, JavaScript And CSS Help
Reload this Page

Struggling to hover image in right place...

Discuss Struggling to hover image in right place... in the HTML, JavaScript And CSS Help forum on ASP Free.
Struggling to hover image in right place... HTML Help forum discussing HTML, DHTML, XHTML, and JavaScript languages for web development, including CSS style sheet coding. All aspects of website development are covered here.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread ASP Free Forums Sponsor:
  #1  
Old October 19th, 2006, 06:50 AM
RadioactiveFrog's Avatar
RadioactiveFrog RadioactiveFrog is offline
Senior Glowing Wizard
ASP Free God 7th Plane (8000 - 8499 posts)
  
Join Date: May 2005
Location: Sussex
Posts: 8,203 RadioactiveFrog User rank is Captain (20000 - 30000 Reputation Level)RadioactiveFrog User rank is Captain (20000 - 30000 Reputation Level)RadioactiveFrog User rank is Captain (20000 - 30000 Reputation Level)RadioactiveFrog User rank is Captain (20000 - 30000 Reputation Level)RadioactiveFrog User rank is Captain (20000 - 30000 Reputation Level)RadioactiveFrog User rank is Captain (20000 - 30000 Reputation Level)RadioactiveFrog User rank is Captain (20000 - 30000 Reputation Level)RadioactiveFrog User rank is Captain (20000 - 30000 Reputation Level)RadioactiveFrog User rank is Captain (20000 - 30000 Reputation Level)  Folding Points: 156607 Folding Title: Super Ultimate Folder - Level 1Folding Points: 156607 Folding Title: Super Ultimate Folder - Level 1Folding Points: 156607 Folding Title: Super Ultimate Folder - Level 1Folding Points: 156607 Folding Title: Super Ultimate Folder - Level 1Folding Points: 156607 Folding Title: Super Ultimate Folder - Level 1Folding Points: 156607 Folding Title: Super Ultimate Folder - Level 1
Time spent in forums: 3 Weeks 4 Days 39 m 12 sec
Reputation Power: 291
Send a message via MSN to RadioactiveFrog
Facebook
Struggling to hover image in right place...
hey all,

I have a listing of products and i have put some CSS code in that displays a bigger version of the image. however, some of the images get cut off on hover...

here is the link to see what i mean
http://www.wet-bathrooms.co.uk/prod...p?type=c&&id=11

It would be cool if i could plan where it is displayed on teh screen a bt more. Ideally horizontally just to the right of the list and vertically in the middle but my attempts have failed, if i try to set the vertical position then as i scroll down and hover over an image further down it gets displayed at the top because that is where i set it to go!!

aaaaaagh

anyone see what i mean??

here is the css

css Code:
Original - css Code 
  1.  
  2. div#tooltip a span {display: none;}
  3. div#tooltip a:hover span {display: block;
  4.    position: absolute; left: 450px;
  5.    padding: 5px; margin: 10px; z-index: 100;
  6.    color: black; border: 0px solid #ccc;
  7.    font: 10px Verdana, sans-serif; text-align: center;}


cheers,

RF
Reply With Quote
  #2  
Old October 19th, 2006, 06:58 AM
Shadow Wizard's Avatar
Shadow Wizard Shadow Wizard is offline
Moderator From Beyond
Click here for more information.
  
Join Date: Sep 2004
Location: Israel
Posts: 26,969 Shadow Wizard User rank is General 8th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 8th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 8th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 8th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 8th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 8th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 8th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 8th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 8th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 8th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 8th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 8th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 8th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 8th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 8th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 8th Grade (Above 100000 Reputation Level)  Folding Points: 342040 Folding Title: Super Ultimate Folder - Level 1Folding Points: 342040 Folding Title: Super Ultimate Folder - Level 1Folding Points: 342040 Folding Title: Super Ultimate Folder - Level 1Folding Points: 342040 Folding Title: Super Ultimate Folder - Level 1Folding Points: 342040 Folding Title: Super Ultimate Folder - Level 1Folding Points: 342040 Folding Title: Super Ultimate Folder - Level 1
Time spent in forums: 3 Months 1 Week 5 Days 15 h 9 m 16 sec
Reputation Power: 1556
you'll have to use javascript, no pure CSS way. the code is
currently Firefox only (IE won't support hover for tags other than anchor)
so JS is must-be.
most straight forward way is having placeholder for the bigger image
in every row, then use JS to assign the bigger image into the
placeholder upon mouse over.
Reply With Quote
  #3  
Old October 19th, 2006, 07:03 AM
RadioactiveFrog's Avatar
RadioactiveFrog RadioactiveFrog is offline
Senior Glowing Wizard
ASP Free God 7th Plane (8000 - 8499 posts)
  
Join Date: May 2005
Location: Sussex
Posts: 8,203 RadioactiveFrog User rank is Captain (20000 - 30000 Reputation Level)RadioactiveFrog User rank is Captain (20000 - 30000 Reputation Level)RadioactiveFrog User rank is Captain (20000 - 30000 Reputation Level)RadioactiveFrog User rank is Captain (20000 - 30000 Reputation Level)RadioactiveFrog User rank is Captain (20000 - 30000 Reputation Level)RadioactiveFrog User rank is Captain (20000 - 30000 Reputation Level)RadioactiveFrog User rank is Captain (20000 - 30000 Reputation Level)RadioactiveFrog User rank is Captain (20000 - 30000 Reputation Level)RadioactiveFrog User rank is Captain (20000 - 30000 Reputation Level)  Folding Points: 156607 Folding Title: Super Ultimate Folder - Level 1Folding Points: 156607 Folding Title: Super Ultimate Folder - Level 1Folding Points: 156607 Folding Title: Super Ultimate Folder - Level 1Folding Points: 156607 Folding Title: Super Ultimate Folder - Level 1Folding Points: 156607 Folding Title: Super Ultimate Folder - Level 1Folding Points: 156607 Folding Title: Super Ultimate Folder - Level 1
Time spent in forums: 3 Weeks 4 Days 39 m 12 sec
Reputation Power: 291
Send a message via MSN to RadioactiveFrog
Facebook
Quote:
Originally Posted by Shadow Wizard
you'll have to use javascript, no pure CSS way. the code is
currently Firefox only (IE won't support hover for tags other than anchor)
so JS is must-be.
most straight forward way is having placeholder for the bigger image
in every row, then use JS to assign the bigger image into the
placeholder upon mouse over.
how would the place holder work? cus i kinda want it over the top of some of the page rather than in the page...if you see what i mean!
Reply With Quote
  #4  
Old October 19th, 2006, 07:25 AM
Shadow Wizard's Avatar
Shadow Wizard Shadow Wizard is offline
Moderator From Beyond
Click here for more information.
  
Join Date: Sep 2004
Location: Israel
Posts: 26,969 Shadow Wizard User rank is General 8th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 8th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 8th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 8th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 8th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 8th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 8th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 8th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 8th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 8th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 8th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 8th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 8th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 8th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 8th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 8th Grade (Above 100000 Reputation Level)  Folding Points: 342040 Folding Title: Super Ultimate Folder - Level 1Folding Points: 342040 Folding Title: Super Ultimate Folder - Level 1Folding Points: 342040 Folding Title: Super Ultimate Folder - Level 1Folding Points: 342040 Folding Title: Super Ultimate Folder - Level 1Folding Points: 342040 Folding Title: Super Ultimate Folder - Level 1Folding Points: 342040 Folding Title: Super Ultimate Folder - Level 1
Time spent in forums: 3 Months 1 Week 5 Days 15 h 9 m 16 sec
Reputation Power: 1556
don't understand what you mean.. here is little sample code that
should get you started: (after some thought, I came to understand
that simply putting the big images and hide them initially is the best)
Code:
<script type="text/javascript">
function ToggleDisplay(strElementID, strNewDisplay) {
   var element = document.getElementById(strElementID);
   if (!element) {
      alert("debug: element with id "+strElementID+" does not exist.");
      return false;
   }
   element.style.display = strNewDisplay;
}
</script>
...
<img src="small.jpg" onmouveover="ToggleDisplay('bigPic1', '');" onmouseout="ToggleDisplay('bigPic1', 'none');" /><img src="big.jpg" id="bigPic1" style="display: none;" />
Reply With Quote
  #5  
Old October 19th, 2006, 08:25 AM
degsy degsy is offline
Contributing User
ASP Free God 2nd Plane (6000 - 6499 posts)
  
Join Date: Aug 2005
Location: North East, UK
Posts: 6,191 degsy User rank is First Lieutenant (10000 - 20000 Reputation Level)degsy User rank is First Lieutenant (10000 - 20000 Reputation Level)degsy User rank is First Lieutenant (10000 - 20000 Reputation Level)degsy User rank is First Lieutenant (10000 - 20000 Reputation Level)degsy User rank is First Lieutenant (10000 - 20000 Reputation Level)degsy User rank is First Lieutenant (10000 - 20000 Reputation Level)degsy User rank is First Lieutenant (10000 - 20000 Reputation Level)degsy User rank is First Lieutenant (10000 - 20000 Reputation Level) 
Time spent in forums: 3 Weeks 4 Days 19 h 41 m 52 sec
Reputation Power: 121
Another option is a Javascript Tooltip
http://www.walterzorn.com/tooltip/tooltip_e.htm
__________________
CyberTechHelp
Reply With Quote
  #6  
Old October 19th, 2006, 09:07 AM
RadioactiveFrog's Avatar
RadioactiveFrog RadioactiveFrog is offline
Senior Glowing Wizard
ASP Free God 7th Plane (8000 - 8499 posts)
  
Join Date: May 2005
Location: Sussex
Posts: 8,203 RadioactiveFrog User rank is Captain (20000 - 30000 Reputation Level)RadioactiveFrog User rank is Captain (20000 - 30000 Reputation Level)RadioactiveFrog User rank is Captain (20000 - 30000 Reputation Level)RadioactiveFrog User rank is Captain (20000 - 30000 Reputation Level)RadioactiveFrog User rank is Captain (20000 - 30000 Reputation Level)RadioactiveFrog User rank is Captain (20000 - 30000 Reputation Level)RadioactiveFrog User rank is Captain (20000 - 30000 Reputation Level)RadioactiveFrog User rank is Captain (20000 - 30000 Reputation Level)RadioactiveFrog User rank is Captain (20000 - 30000 Reputation Level)  Folding Points: 156607 Folding Title: Super Ultimate Folder - Level 1Folding Points: 156607 Folding Title: Super Ultimate Folder - Level 1Folding Points: 156607 Folding Title: Super Ultimate Folder - Level 1Folding Points: 156607 Folding Title: Super Ultimate Folder - Level 1Folding Points: 156607 Folding Title: Super Ultimate Folder - Level 1Folding Points: 156607 Folding Title: Super Ultimate Folder - Level 1
Time spent in forums: 3 Weeks 4 Days 39 m 12 sec
Reputation Power: 291
Send a message via MSN to RadioactiveFrog
Facebook
hey guys,

thanks for the suggestions, the tooltip one seems to work ok ish...modified some of the settings a bit. Still if the image is kinda in teh middle of the page sometimes some of it gets cut off !

any thoughts?

http://www.wet-bathrooms.co.uk/productListing.php?type=c&&id=11
Reply With Quote
  #7  
Old October 19th, 2006, 09:34 AM
degsy degsy is offline
Contributing User
ASP Free God 2nd Plane (6000 - 6499 posts)
  
Join Date: Aug 2005
Location: North East, UK
Posts: 6,191 degsy User rank is First Lieutenant (10000 - 20000 Reputation Level)degsy User rank is First Lieutenant (10000 - 20000 Reputation Level)degsy User rank is First Lieutenant (10000 - 20000 Reputation Level)degsy User rank is First Lieutenant (10000 - 20000 Reputation Level)degsy User rank is First Lieutenant (10000 - 20000 Reputation Level)degsy User rank is First Lieutenant (10000 - 20000 Reputation Level)degsy User rank is First Lieutenant (10000 - 20000 Reputation Level)degsy User rank is First Lieutenant (10000 - 20000 Reputation Level) 
Time spent in forums: 3 Weeks 4 Days 19 h 41 m 52 sec
Reputation Power: 121
Make the image smaller.
Change the position of the tooptip layer.
Reply With Quote
Reply

Viewing: ASP Free Forums > Programming > HTML, JavaScript And CSS Help > Struggling to hover image in right place...

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 2 hosted by Hostway.