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,223 RadioactiveFrog User rank is Major (30000 - 40000 Reputation Level)RadioactiveFrog User rank is Major (30000 - 40000 Reputation Level)RadioactiveFrog User rank is Major (30000 - 40000 Reputation Level)RadioactiveFrog User rank is Major (30000 - 40000 Reputation Level)RadioactiveFrog User rank is Major (30000 - 40000 Reputation Level)RadioactiveFrog User rank is Major (30000 - 40000 Reputation Level)RadioactiveFrog User rank is Major (30000 - 40000 Reputation Level)RadioactiveFrog User rank is Major (30000 - 40000 Reputation Level)RadioactiveFrog User rank is Major (30000 - 40000 Reputation Level)RadioactiveFrog User rank is Major (30000 - 40000 Reputation Level)  Folding Points: 170090 Folding Title: Super Ultimate Folder - Level 1Folding Points: 170090 Folding Title: Super Ultimate Folder - Level 1Folding Points: 170090 Folding Title: Super Ultimate Folder - Level 1Folding Points: 170090 Folding Title: Super Ultimate Folder - Level 1Folding Points: 170090 Folding Title: Super Ultimate Folder - Level 1Folding Points: 170090 Folding Title: Super Ultimate Folder - Level 1
Time spent in forums: 3 Weeks 4 Days 3 h 46 m 30 sec
Reputation Power: 327
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
ASP Free God 47th Plane (28000 - 28499 posts)
  
Join Date: Sep 2004
Location: Israel
Posts: 28,432 Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)  Folding Points: 478881 Folding Title: Super Ultimate Folder - Level 1Folding Points: 478881 Folding Title: Super Ultimate Folder - Level 1Folding Points: 478881 Folding Title: Super Ultimate Folder - Level 1Folding Points: 478881 Folding Title: Super Ultimate Folder - Level 1Folding Points: 478881 Folding Title: Super Ultimate Folder - Level 1Folding Points: 478881 Folding Title: Super Ultimate Folder - Level 1
Time spent in forums: 3 Months 2 Weeks 1 Day 1 h 1 m 6 sec
Reputation Power: 2190
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,223 RadioactiveFrog User rank is Major (30000 - 40000 Reputation Level)RadioactiveFrog User rank is Major (30000 - 40000 Reputation Level)RadioactiveFrog User rank is Major (30000 - 40000 Reputation Level)RadioactiveFrog User rank is Major (30000 - 40000 Reputation Level)RadioactiveFrog User rank is Major (30000 - 40000 Reputation Level)RadioactiveFrog User rank is Major (30000 - 40000 Reputation Level)RadioactiveFrog User rank is Major (30000 - 40000 Reputation Level)RadioactiveFrog User rank is Major (30000 - 40000 Reputation Level)RadioactiveFrog User rank is Major (30000 - 40000 Reputation Level)RadioactiveFrog User rank is Major (30000 - 40000 Reputation Level)  Folding Points: 170090 Folding Title: Super Ultimate Folder - Level 1Folding Points: 170090 Folding Title: Super Ultimate Folder - Level 1Folding Points: 170090 Folding Title: Super Ultimate Folder - Level 1Folding Points: 170090 Folding Title: Super Ultimate Folder - Level 1Folding Points: 170090 Folding Title: Super Ultimate Folder - Level 1Folding Points: 170090 Folding Title: Super Ultimate Folder - Level 1
Time spent in forums: 3 Weeks 4 Days 3 h 46 m 30 sec
Reputation Power: 327
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
ASP Free God 47th Plane (28000 - 28499 posts)
  
Join Date: Sep 2004
Location: Israel
Posts: 28,432 Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)Shadow Wizard User rank is General 18th Grade (Above 100000 Reputation Level)  Folding Points: 478881 Folding Title: Super Ultimate Folder - Level 1Folding Points: 478881 Folding Title: Super Ultimate Folder - Level 1Folding Points: 478881 Folding Title: Super Ultimate Folder - Level 1Folding Points: 478881 Folding Title: Super Ultimate Folder - Level 1Folding Points: 478881 Folding Title: Super Ultimate Folder - Level 1Folding Points: 478881 Folding Title: Super Ultimate Folder - Level 1
Time spent in forums: 3 Months 2 Weeks 1 Day 1 h 1 m 6 sec
Reputation Power: 2190
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,223 RadioactiveFrog User rank is Major (30000 - 40000 Reputation Level)RadioactiveFrog User rank is Major (30000 - 40000 Reputation Level)RadioactiveFrog User rank is Major (30000 - 40000 Reputation Level)RadioactiveFrog User rank is Major (30000 - 40000 Reputation Level)RadioactiveFrog User rank is Major (30000 - 40000 Reputation Level)RadioactiveFrog User rank is Major (30000 - 40000 Reputation Level)RadioactiveFrog User rank is Major (30000 - 40000 Reputation Level)RadioactiveFrog User rank is Major (30000 - 40000 Reputation Level)RadioactiveFrog User rank is Major (30000 - 40000 Reputation Level)RadioactiveFrog User rank is Major (30000 - 40000 Reputation Level)  Folding Points: 170090 Folding Title: Super Ultimate Folder - Level 1Folding Points: 170090 Folding Title: Super Ultimate Folder - Level 1Folding Points: 170090 Folding Title: Super Ultimate Folder - Level 1Folding Points: 170090 Folding Title: Super Ultimate Folder - Level 1Folding Points: 170090 Folding Title: Super Ultimate Folder - Level 1Folding Points: 170090 Folding Title: Super Ultimate Folder - Level 1
Time spent in forums: 3 Weeks 4 Days 3 h 46 m 30 sec
Reputation Power: 327
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



 Free IT White Papers!
 
How to Present Effectively Online
This white paper offers practical and actionable advice on the key steps that any presenter should consider as they plan and execute a Webinar or online meeting.
 
Open Source Security Myths
Open Source Software (OSS) is computer software whose source code is available to the general public with relaxed or non-existent intellectual property restrictions (or arrangement such as the public domain), and is usually developed with the input of many contributors.
 
Power and Cooling Capacity Management for Data Centers
This paper describes the principles for achieving power and cooling capacity management.
 
Scalable, Fault-Tolerant NAS for Oracle - The Next Generation
For several years NAS has been evolving as a storage alternative for Oracle databases, and for good reason: NAS is quite often the simplest, most cost-effective storage approach for Oracle. Learn about the benefits that HP's approach to scalable NAS brings to Oracle environments in this comprehensive white paper.
 
Understanding Web Application Security Challenges
This white paper discusses many common threats and preventive measures for Web application security, and explains what you can do to help protect your organization.
 

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





© 2003-2009 by Developer Shed. All rights reserved. DS Cluster 5 hosted by Hostway. 
Stay green...Green IT