PHP Development
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed ForumsProgramming LanguagesPHP Development

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old August 22nd, 2008, 08:45 AM
peroerik peroerik is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Aug 2008
Location: Sweden
Posts: 12 peroerik User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 19 m 8 sec
Reputation Power: 0
Other - Displaying both text and image at event, onMouseover.

Recently I got very good help with a Mouseover problem here at this Forum (by mikeyskona).

I fell in love with the function onMouseover so now I want to do something a little bit more complicated.

Background:

I display a list of members of a board and onMouseover the name I want to display a little “window” containing a picture of the person, the name and a short description of the persons background.

I use PHP and a Javascript from http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip.htm.

I keep the information of each person in an MySQL databse, in a table named styrelse. The table is built up by 5 fields:
Fnamn, enamn, funktion, picture and description.
The fields are fetched from the database and put into an array ($styr1).
Like this:
Code:
$styr1=mysql_query("SELECT * FROM styrelse WHERE funktion IS NOT NULL ORDER BY funktion ASC");

To display the text and make the mouseover work for the text part is no problem. What I am not able to do is to combine the text with the image, if that is possible.

Here is the relevant part of the code:

Code:
<table border="0" cellpadding="3">

<?php
while($strad1=mysql_fetch_row($styr1)){
     echo '<tr>
          <td>'.$strad1[0].'</td>
          <td width=270 onMouseover="ddrivetip(\'<b>'.$strad1[0].''.$strad1[1].'</b><br>'.$strad1[2].'<br><br>'.$strad1[4].'\' ,\'white\', 500);"
          onMouseout="hideddrivetip()">'.$strad1[1].'</td><td>'.$strad1[2].'</td></tr>';
}

?>
The code above works fine but I want to add some code to display an image too.
Something like this:

Code:
<img src="../bilder/sw130.jpg" alt="" height="160" width="130" border="0">


To make it flexible I need to point to the image thru a link in the field picture $strad1[4].

Perhaps like this:
Code:
 <img src="$strad1[4] " alt="" height="160" width="130" border="0">

I can not make this work. Perhaps I am on the wrong track?
Maybe I use the wrong JavaScript.
My knowledge of JavaScripts is very limited.

Do someone have a better suggestion?

Reply With Quote
  #2  
Old August 22nd, 2008, 09:57 AM
acidfourtyfive's Avatar
acidfourtyfive acidfourtyfive is offline
Since 439000000
Dev Shed Novice (500 - 999 posts)
 
Join Date: May 2004
Location: Canada
Posts: 807 acidfourtyfive User rank is Second Lieutenant (5000 - 10000 Reputation Level)acidfourtyfive User rank is Second Lieutenant (5000 - 10000 Reputation Level)acidfourtyfive User rank is Second Lieutenant (5000 - 10000 Reputation Level)acidfourtyfive User rank is Second Lieutenant (5000 - 10000 Reputation Level)acidfourtyfive User rank is Second Lieutenant (5000 - 10000 Reputation Level)acidfourtyfive User rank is Second Lieutenant (5000 - 10000 Reputation Level)acidfourtyfive User rank is Second Lieutenant (5000 - 10000 Reputation Level) 
Time spent in forums: 1 Week 23 h 7 m 22 sec
Reputation Power: 90
It sounds like you want to modify the image on mouseover to include their name, and not just make a pop-up tool-tip style item with their name in it. This would require some ajax, or similar technology to make a php call to modify the image and send the new image name to javascript which would then load it. Depending on the speed of your server this may take quite some time, especially on th edevelopment box since image manipulation isn't a simple task for the proc. Once hosted it should be seamless.
__________________
Will code for food or

Reply With Quote
  #3  
Old August 22nd, 2008, 10:20 AM
jsampsonPC's Avatar
jsampsonPC jsampsonPC is offline
stick a scissor in you eye
Dev Shed Intermediate (1500 - 1999 posts)
 
Join Date: Jun 2004
Location: Pensacola, Florida
Posts: 1,572 jsampsonPC User rank is Lieutenant Colonel (40000 - 50000 Reputation Level)jsampsonPC User rank is Lieutenant Colonel (40000 - 50000 Reputation Level)jsampsonPC User rank is Lieutenant Colonel (40000 - 50000 Reputation Level)jsampsonPC User rank is Lieutenant Colonel (40000 - 50000 Reputation Level)jsampsonPC User rank is Lieutenant Colonel (40000 - 50000 Reputation Level)jsampsonPC User rank is Lieutenant Colonel (40000 - 50000 Reputation Level)jsampsonPC User rank is Lieutenant Colonel (40000 - 50000 Reputation Level)jsampsonPC User rank is Lieutenant Colonel (40000 - 50000 Reputation Level)jsampsonPC User rank is Lieutenant Colonel (40000 - 50000 Reputation Level)jsampsonPC User rank is Lieutenant Colonel (40000 - 50000 Reputation Level)jsampsonPC User rank is Lieutenant Colonel (40000 - 50000 Reputation Level) 
Time spent in forums: 1 Week 6 Days 15 h 19 m 57 sec
Reputation Power: 430
Not sure if this is a limitation of your popup-script, but with overlib you can set images, text, titles, and everything with extreme ease.
__________________
FREE Web Development Videos | PHP Reference | MySQL Reference | jQuery Documentation

Markup Validation | CSS Validation | Web Developers, get FireBug & IE Developer Toolbar

When seeking help:
Submit clear questions and code. Use syntax highlighting.
Be patient, and respectful. Don't abuse your access to
professional guidance - nobody here is obligated to answer
your questions, be thankful that they do.

Are you a good person?

Reply With Quote
  #4  
Old August 22nd, 2008, 11:13 AM
mikeyskona mikeyskona is offline
Contributing User
Dev Shed Novice (500 - 999 posts)
 
Join Date: Aug 2008
Location: Plymouth UK
Posts: 964 mikeyskona User rank is First Lieutenant (10000 - 20000 Reputation Level)mikeyskona User rank is First Lieutenant (10000 - 20000 Reputation Level)mikeyskona User rank is First Lieutenant (10000 - 20000 Reputation Level)mikeyskona User rank is First Lieutenant (10000 - 20000 Reputation Level)mikeyskona User rank is First Lieutenant (10000 - 20000 Reputation Level)mikeyskona User rank is First Lieutenant (10000 - 20000 Reputation Level)mikeyskona User rank is First Lieutenant (10000 - 20000 Reputation Level)mikeyskona User rank is First Lieutenant (10000 - 20000 Reputation Level)  Folding Points: 29666 Folding Title: Starter FolderFolding Points: 29666 Folding Title: Starter Folder
Time spent in forums: 1 Week 9 h 22 m 45 sec
Reputation Power: 150
Hello again .

i'm not completely sure what you're trying to acheive here, are you trying to make the image "popup" on mouseOver of something? or are you just trying to make it change an image in a certain area of the page on mouseover?

making the image popup is possible, but a tiny bit more tricky than just making an image on the page change

The simplest method would be a single div (with an id) then having the mouseover change the content of the div.. You may end up with a little x for a second or so until the image has loaded (unless you use a pre-loader, but with lots of images that could make the page take a while to load). The other option is with ajax, which we could probably go through reasonaby simply.

The beauty of ajax is that you can get javascript to load content of another page inside an element within your web page.

Give us a good idea of exactly what you want to happen and we'll help you get it there

Reply With Quote
  #5  
Old August 22nd, 2008, 11:46 AM
peroerik peroerik is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Aug 2008
Location: Sweden
Posts: 12 peroerik User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 19 m 8 sec
Reputation Power: 0
I want an image and a text to popup on mouseover. Both the text and a link to the image is stored in the same record in the database.

Ther will be 10 to 12 records in the DB containing different text and image-links.
This is to present persons with a photograph and some background.

Reply With Quote
  #6  
Old August 22nd, 2008, 12:10 PM
acidfourtyfive's Avatar
acidfourtyfive acidfourtyfive is offline
Since 439000000
Dev Shed Novice (500 - 999 posts)
 
Join Date: May 2004
Location: Canada
Posts: 807 acidfourtyfive User rank is Second Lieutenant (5000 - 10000 Reputation Level)acidfourtyfive User rank is Second Lieutenant (5000 - 10000 Reputation Level)acidfourtyfive User rank is Second Lieutenant (5000 - 10000 Reputation Level)acidfourtyfive User rank is Second Lieutenant (5000 - 10000 Reputation Level)acidfourtyfive User rank is Second Lieutenant (5000 - 10000 Reputation Level)acidfourtyfive User rank is Second Lieutenant (5000 - 10000 Reputation Level)acidfourtyfive User rank is Second Lieutenant (5000 - 10000 Reputation Level) 
Time spent in forums: 1 Week 23 h 7 m 22 sec
Reputation Power: 90
When you generate the page just add the items you want to the page and set their style to display:none; and when you mouse over just display:block;. You will have to set their position and whatnot.

Reply With Quote
Reply

Viewing: Dev Shed ForumsProgramming LanguagesPHP Development > Other - Displaying both text and image at event, onMouseover.


Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
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-2008 by Developer Shed. All rights reserved. DS Cluster 6 hosted by Hostway
Stay green...Green IT