php.de

Zurück   php.de > Webentwicklung > PHP Einsteiger > PHP Tipps 2010

 
 
LinkBack Themen-Optionen Thema bewerten
Alt 08.06.2010, 14:05  
Neuer Benutzer
 
Registriert seit: 08.06.2010
Beiträge: 14
PHP-Kenntnisse:
Fortgeschritten
localhost. befindet sich auf einem aufstrebenden Ast
Standard [Erledigt] ToolTip mit Grafik und spezielle Detail's anzeigen

Sehr geehrte Php.de Community ^^,

Ich habe ein Script wo ein Bild ausgegeben wird, nun möchte ich das per ToolTip noch spezielle Daten ausgegeben werden d.h man geht übers bild und bekommt verschiedene Daten

Mein Problem besteht darin das die Daten nicht mit dem Mousover reagieren fazit. Deteils werden unter dem Bild angezeigt in Normaler Schrift wenn man mit der Maus drüber fährt..

Ausgabe:
PHP-Code:
echo 
'<center><a rel="tt"><img src="'.$bild['bildlink'].'" 
/></a><div 
style="display:none;">'
.$bild['name'].'</div></center>'
Tooltip Css und Script Code:

Code:
<style>
body
 {font-family:arial;font-size:12px;text-align:center;}
div#paragraph 
{width:300px;margin:0 auto;text-align:left}
a 
{color:#aaa;text-decoration:none;cursor:pointer;cursor:hand}
a:hover 
{color:#000;text-decoration:none;}
.clear {clear:both}


/* 
Tooltip */

#tooltip {
position:absolute;
z-index:9999;
color:#fff;
font-size:10px;
width:180px;

}

#tooltip
 .tipHeader {
height:8px;
background:url(images/tipHeader.gif) 
no-repeat;
}


#tooltip .tipBody {
background-color:#000;
padding:5px
 5px 5px 15px;
}

#tooltip .tipFooter {
height:8px;
background:url(images/tipFooter.gif)
 no-repeat;
}

</style>



<script 
type="text/javascript" 
src="http://code.jquery.com/jquery-latest.js"></script>  
<script
 type="text/javascript">  
  
$(document).ready(function() {  

  
    //Select all anchor tag with rel set to tooltip  
    
$('a[rel=tt]').mouseover(function(e) {  
          
        //Grab
 the title attribute's value and assign it to a variable  
        
var tip = $(this).next().html();    
          
        //Remove 
the title attribute's to avoid the native tooltip from the browser  

        $(this).attr('title','');  
          
        //Append 
the tooltip template and its value  
        $(this).append('<div 
id="tt"><div class="tipHeader"></div><div 
class="tipBody">' + tip + '</div><div 
class="tipFooter"></div></div>');       
          

        //Set the X and Y axis of the tooltip  
        
$('#tt').css('top', e.pageY + 10 );  
        $('#tt').css('left', 
e.pageX + 20 );  
          
        //Show the tooltip with 
faceIn effect  
        $('#tt').fadeIn('500');  
        
$('#tt').fadeTo('10',0.8);  
          
    
}).mousemove(function(e) {  
      
        //Keep changing the X 
and Y axis for the tooltip, thus, the tooltip move along with the mouse 
 
        $('#tt').css('top', e.pageY + 10 );  
        
$('#tt').css('left', e.pageX + 20 );  
          
    
}).mouseout(function() {  
      
        
        
$(this).attr('title',$('.tipBody').html());  
      
        
//Remove the appended tooltip template  
$(this).children('div#tt').remove();
  
          
    }).next().hide();
  
});  
  
</script>
Ich bedanke mich schonmal für eure Hilfe
localhost. ist offline  
Sponsor Mitteilung
PHP Code Flüsterer

Registriert seit: 21.08.2005
Beiträge: 4682
PHP-Kenntnisse:
Fortgeschritten

Alt 08.06.2010, 14:09  
Erfahrener Benutzer
 
Benutzerbild von Ti-Systems
 
Registriert seit: 06.10.2008
Beiträge: 240
PHP-Kenntnisse:
Fortgeschritten
Ti-Systems befindet sich auf einem aufstrebenden Ast
Ti-Systems eine Nachricht über ICQ schicken Ti-Systems eine Nachricht über MSN schicken
Standard

Hallo,

Ich rate dir an ein JavaScript-Framework wie MooTools oder jQuery zu empfehlen, denn dort gibt es schon eine Reihe von "tollaussehenden" Tooltips.

mfg Timo
Ti-Systems ist offline  
Alt 08.06.2010, 14:10  
Erfahrener Benutzer
 
Registriert seit: 25.09.2009
Beiträge: 2.115
PHP-Kenntnisse:
Fortgeschritten
BlackScorp wird schon bald berühmt werdenBlackScorp wird schon bald berühmt werden
Standard

wie ich sehe, nutzt du jQuery, wozu dann soviel code wenn es jQuery plugins gibt?

jQuery Tooltip Plugin Demo
__________________
Mein kleines Projekt
-Cruel Online-
5 von 3 Leuten können kein Bruchrechnen
BlackScorp ist offline  
Alt 08.06.2010, 14:13  
Erfahrener Benutzer
 
Benutzerbild von Ti-Systems
 
Registriert seit: 06.10.2008
Beiträge: 240
PHP-Kenntnisse:
Fortgeschritten
Ti-Systems befindet sich auf einem aufstrebenden Ast
Ti-Systems eine Nachricht über ICQ schicken Ti-Systems eine Nachricht über MSN schicken
Standard

Hoppla - Das er jQuery benutzt habe ich nicht mal beachtet...
In diesem Fall ist es ja noch besser

Hier auch noch eines: http://flowplayer.org/tools/tooltip/index.html

mfg Timo
Ti-Systems ist offline  
Alt 08.06.2010, 14:20  
Neuer Benutzer
 
Registriert seit: 08.06.2010
Beiträge: 14
PHP-Kenntnisse:
Fortgeschritten
localhost. befindet sich auf einem aufstrebenden Ast
Standard

@Ti-Systems beim Flowplayer is das Problem das wenn ich mehrere Bilder z.B 5 in die Datenbank eintrage, dann später immer per Hand die Bilder in die Css rein tuen muss.

Ich brauch ein Tooltip Version wo wenn ich dann in naher Zukunft mehr als 200 Bilder mit Deteil's habe nicht per Hand sonder Automatisch ausgegeben wird.
localhost. ist offline  
Alt 08.06.2010, 14:27  
Erfahrener Benutzer
 
Registriert seit: 25.09.2009
Beiträge: 2.115
PHP-Kenntnisse:
Fortgeschritten
BlackScorp wird schon bald berühmt werdenBlackScorp wird schon bald berühmt werden
Standard

du kannst doch mit php einen HTML code generieren. diese tooltip plugins machen ja nichts anderes als schon vorhandene elemente sichtbar machen.

das gleiche hast du ja am anfang auch gemacht

PHP-Code:
style="display:none;">'.$bild['name'].'</div></center
hier ist eine anleitung was für ein HTML code du benötigst um individuellen inhalt in das tooltip fenster einzutragen

http://flowplayer.org/tools/demos/tooltip/any-html.html
__________________
Mein kleines Projekt
-Cruel Online-
5 von 3 Leuten können kein Bruchrechnen
BlackScorp ist offline  
Alt 08.06.2010, 14:33  
Neuer Benutzer
 
Registriert seit: 08.06.2010
Beiträge: 14
PHP-Kenntnisse:
Fortgeschritten
localhost. befindet sich auf einem aufstrebenden Ast
Standard

@Black Ich weis das hab ich gerade übersehn

Edit: Ich seh meinen Fehler nicht..

PHP-Code:
echo '/* trigger button */
#bild {
    background:transparent url(.$bild['
userpic'].) no-repeat scroll 0 0;
    display:block;
    height:44px;
    margin-bottom:30px;
    overflow:hidden;
    text-indent:-999em;
    width:159px;
    cursor:pointer;
}

/* mouseover state */
#download_now:hover {
    background-position:0 -44px ;        
}

/* clicked state */
#download_now:focus {
    background-position:0 -88px;
}

/* tooltip styling */
.tooltip {
    display:none;
    background:url(http://static.flowplayer.org/tools/img/tooltip/black_arrow_big.png);
    height:163px;
    padding:40px 30px 10px 30px;
    width:310px;
    font-size:11px;
    color:#fff;
}

/* a .label element inside tooltip */
.tooltip .label {
    color:yellow;
    width:35px;
}

.tooltip a {
    color:#ad4;
    font-size:11px;
    font-weight:bold;
}


 
 
<div class="bild">

    <table style="margin:0">
        <tr>
            <td class="label">Name</td>
            <td>.$bild['
name'].</td>
        </tr>
        <tr>
            <td class="label">Preis</td>
            <td>.$bild['
wert'].</td>
        </tr>

    </table>

    <a href="/3.2/">What'
new in 3.2</a>
</
div>
$(
"#bild").tooltip({ effect'slide'});  ;
 } 

Geändert von localhost. (08.06.2010 um 14:36 Uhr).
localhost. ist offline  
Alt 08.06.2010, 14:34  
Erfahrener Benutzer
 
Benutzerbild von Ti-Systems
 
Registriert seit: 06.10.2008
Beiträge: 240
PHP-Kenntnisse:
Fortgeschritten
Ti-Systems befindet sich auf einem aufstrebenden Ast
Ti-Systems eine Nachricht über ICQ schicken Ti-Systems eine Nachricht über MSN schicken
Standard

Hallo,

Wie wäre es mit einer Fehlerbeschreibung?
Ich habe mir das ganze nicht richtig angeschaut, aber stimmt es, dass auf der zweit letzten Zeile zwei Semikolone hintereinander sein sollten?

mfg Timo
Ti-Systems ist offline  
Alt 08.06.2010, 14:37  
Neuer Benutzer
 
Registriert seit: 08.06.2010
Beiträge: 14
PHP-Kenntnisse:
Fortgeschritten
localhost. befindet sich auf einem aufstrebenden Ast
Standard

So sry ne am ende sollte vor dem letzen Simikolon noch ein ' sein wird aber nicht angezeigt o.O

Hier die Fehlerbeschreibung:

Code:
Parse error: syntax error, unexpected T_STRING, expecting ',' or ';' in D:\xampp\htdocs\cms\index.php(61) : eval()'d code(1) : eval()'d code on line 8
localhost. ist offline  
Alt 08.06.2010, 14:39  
Erfahrener Benutzer
 
Benutzerbild von Ti-Systems
 
Registriert seit: 06.10.2008
Beiträge: 240
PHP-Kenntnisse:
Fortgeschritten
Ti-Systems befindet sich auf einem aufstrebenden Ast
Ti-Systems eine Nachricht über ICQ schicken Ti-Systems eine Nachricht über MSN schicken
Standard

Schau dir mal Zeile drei an

Und was macht der CSS-Code in einem echo ?

mfg Timo
Ti-Systems ist offline  
 


Themen-Optionen
Thema bewerten
Thema bewerten:

Forumregeln
Es ist dir nicht erlaubt, neue Themen zu verfassen.
Es ist dir nicht erlaubt, auf Beiträge zu antworten.
Es ist dir nicht erlaubt, Anhänge hochzuladen.
Es ist dir nicht erlaubt, deine Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are an
Gehe zu

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
google map tooltip über link aufrufen mqs JavaScript, Ajax und mehr 1 18.03.2010 15:23
Koordinaten des Mauszeigers über einer Grafik (Drag&Drop mit jQuery) anbeck JavaScript, Ajax und mehr 5 19.01.2009 16:28
IP-Adresse per Grafik anzeigen lassen Aoz Scriptbörse 6 29.12.2008 19:54
Während bestimmter Zeitspanne definierte Grafik anzeigen Diego1978 PHP Tipps 2007 1 28.12.2005 15:15
grafik anzeigen für neuen eintrag m-elssner PHP Tipps 2005-2 7 28.08.2005 18:02
Grafik auslesen und anzeigen auf fremder Homepage PHP Tipps 2005-2 4 11.07.2005 10:26
grafik anzeigen für bestimmte seite PHP Tipps 2004 4 23.08.2004 12:57
Binäre Bilddaten aus mySql anzeigen PHP-Fortgeschrittene 31 22.08.2004 13:03
Grafik in Grafik einfügen Filewalker PHP Tipps 2004 3 20.06.2004 14:04

Besucher kamen über folgende Suchanfragen bei Google auf diese Seite
http://www.php.de/php-einsteiger/68741-erledigt-tooltip-mit-grafik-und-spezielle-details-anzeigen.html, tooltip grafik, tooltip mit grafik, php tooltip, tooltip über grafik, html tooltip anzeigen, php tooltip anzeigen, jquery tooltip mit bild, jquery tooltip bild, grafik als tooltip, jquery tooltip grafiken, grafischer tooltip, jquery normaler text tooltip, css tooltip bild, jquery tooltip image, jquery tooltip mit grafik, css image tooltip, tooltip anzeigen html, jquery tooltip mit datensatz, jquery tooltip title font-size

Alle Zeitangaben in WEZ +2. Es ist jetzt 21:03 Uhr.




Powered by vBulletin® Version 3.7.2 (Deutsch)
Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0
Aprilia-Forum, Aquaristik-Forum, Liebeskummer-Forum, Zierfisch-Forum, Geizkragen-Forum