Artikelliste mit Bild + Mouseover Textausgabe (Tooltip)

Gesperrt
m2Designer
Beiträge: 41
Registriert: Mo 23. Aug 2004, 09:47
Kontaktdaten:

Artikelliste mit Bild + Mouseover Textausgabe (Tooltip)

Beitrag von m2Designer »

Hallo zusammen,

mal wieder eine Artikelliste :P Diese Artikelliste basiert auf der Arbeit von Snoopy, zu finden unter http://www.contenido.org/forum/viewtopic.php?t=3209

Folgende Änderung wurde vorgenommen:
Die Ausgabe der Artikelheadline und des Artikeltextes erfolgt in einem Tooltip wenn man über das entsprechende Bild fährt. Vieleicht kann es jemand brauchen.

Beispiel unter:

http://www.prosporttuning.de/cms/front_ ... &idart=307

Viel Spass! Anregungen sind willkommen! Verbesserungen sowieso :D

Und nun zum Code:

Als erstes braucht Ihr folgendes Java Script:
http://www.walterzorn.de/tooltip/tooltip.htm#browser

Da ich den Fehler mit Firefox nicht beheben konnte, habe ich ein alternativscript gefunden.

Eingabe:

Code: Alles auswählen

/** 
* Artikelliste 
* 
* Liste von Artikeln mit mehreren Daten basierend 
* auf 4fb referenz modul 
* 1.Gibt die Subheadline eines Artikel mit aus 
* 2.Anschnitte nur nach ganzen Wörtern 
* 3.Thumnails werden vernünftig berechnet 
* 4.Image für Erzeugung von Thumbs kann gewählt werden 
* Author : Evert Smit / Dirk Uptmoor / Peter Beauvain 
* Copyright : None 
* Created : 13-07-03 
* Modified : 16-08-02 /20-09-03 upt /02-02-04 Beau 
*/ 

// selected category 
$selected = "CMS_VALUE[0]"; 
$seldir = "CMS_VALUE[9]"; 
$selimg = "CMS_VALUE[11]"; 
//funktion für die checkboxen 
function d_checked($which) { 
  if ($which != "") { 
    return "checked"; 
  } 
} // end function 



echo "<table cellspacing=\"0\" cellpadding=\"2\" border=\"0\"> 
         <tr bgcolor=\"#E8E8EE\" valign=\"top\"> 
            <td></td> 
            <td><input type=\"checkbox\" value=\"on\" ".d_checked("CMS_VALUE[14]")." name=\"CMS_VAR[9]\"></td> 
            <td width=\"120\">Ausgabe mit Startartikel</td> 
            <td></td> 
<td>Kategorie wählen:<br> 
          
<select name=\"CMS_VAR[0]\">"; 

if($selected!="0" && $selected!=""){ 
             echo"<option value=\"0\">--- kein ---</option>"; 

            }else{ 
            echo"<option selected=\"selected\" value=\"0\">--- kein ---</option>"; 
            } 

            // fetch all categorys 
            $query = "SELECT A.idcat, A.level, C.name FROM ".$cfg["tab"]["cat_tree"]." AS A, ". 
                     $cfg["tab"]["cat"]." AS B,  ".$cfg["tab"]["cat_lang"]." AS C WHERE A.idcat=B.idcat ". 
                     "AND B.idcat=C.idcat AND C.idlang='$lang' AND B.idclient='$client' ". 
                     "AND C.visible=1 ORDER BY A.idtree"; 
            // execute query 
            $db->query($query); 

            // loop result and build the options 
            while ($db->next_record()) { 

              // indent spacer 
              $spaces = "|"; 

              // how many levels 
              $levels = $db->f("level"); 

              for ($i = 0; $i < $levels; $i ++) { 
                // add 2 spaces for every level 
                $spaces = $spaces . "--"; 

              } // end for 
              
              $spaces .= ">"; 


              if ($selected == $db->f("idcat")) { 
                // selected category 
                echo "<option selected=\"selected\" value=\"". $db->f("idcat") ."\">". $spaces . $db->f("name") ."</option>"; 

              } else { 
                // category 
                echo "<option value=\"". $db->f("idcat") ."\">". $spaces . $db->f("name") ."</option>"; 

              } // end if 

            } // end while 

echo "</select>"; 


        
echo "</td> 
<td></td>      
</tr> 
      <tr valign=\"top\"> 
         <td></td> 
         <td></td> 
         <td width=\"120\"></td> 
            <td></td> 
            <td>Überschrift: (wenn leer, keine Ausgabe)<br> 
               <input type=\"text\" name=\"CMS_VAR[2]\" value=\"CMS_VALUE[2]\" size=\"24\"></td> 
         </tr> 
         <tr bgcolor=\"#E8E8EE\" valign=\"top\"> 
            <td></td> 
            <td> <input type=\"checkbox\" value=\"on\" ".d_checked("CMS_VALUE[4]")." name=\"CMS_VAR[4]\"> </td> 
            <td width=\"120\">Ausgabe der Artikel-Headline</td> 
            <td></td> 
            <td>Angezeigte Zeichen Artikel-Headline:<br> 
               <input type=\"text\" name=\"CMS_VAR[3]\" value=\"CMS_VALUE[3]\" size=\"24\"></td> 
         </tr> 
         <tr valign=\"top\"> 
            <td></td> 
            <td><input type=\"checkbox\" value=\"on\" ".d_checked("CMS_VALUE[5]")."  name=\"CMS_VAR[5]\"></td> 
            <td width=\"120\">Ausgabe der Artikel-Subheadline:</td> 
            <td></td> 
            <td>Angezeigte Zeichen Artikel-Subheadline:<br> 
               <input type=\"text\" name=\"CMS_VAR[6]\" value=\"CMS_VALUE[6]\" size=\"24\"></td> 
         </tr> 
         <tr valign=\"top\"> 
            <td></td> 
            <td><input type=\"checkbox\" value=\"on\" ".d_checked("CMS_VALUE[12]")."  name=\"CMS_VAR[12]\"></td> 
            <td width=\"120\">Ausgabe des Artikel-Texts:</td> 
            <td></td> 
            <td>Angezeigte Zeichen Artikel-Text:<br> 
               <input type=\"text\" name=\"CMS_VAR[13]\" value=\"CMS_VALUE[13]\" size=\"24\"></td> 
         </tr>        
         <tr bgcolor=\"#E8E8EE\" valign=\"top\"> 
            <td></td> 
            
            <tr bgcolor=\"#E8E8EE\" valign=\"top\">  
            <td></td> 
            <td><input type=\"checkbox\" value=\"on\" ".d_checked("CMS_VALUE[7]")."  name=\"CMS_VAR[7]\" ></td> 
            <td width=\"120\">Ausgabe der Thumbnails:</td> 
            <td></td> 
            <td>Bildcontainer für Thumbnail Quelle:<br>"; 
                

$db  = new DB_Contenido; 
$query = "SELECT output AS out, name AS beschreibung FROM ".$cfg["tab"]["mod"]." "; 
$db->query($query); 
echo"<select name=\"CMS_VAR[11]\">"; 
echo"<option value=\"kein\">-- kein --</option> "; 
while ($db->next_record()) { 
$frontendpath = $db->f("out"); 
$name = $db->f("beschreibung"); 

$rest = substr("$frontendpath", 3, 30); 

$find = strpos($rest,"CMS_IMG"); 
if ($find === false) { 

} 

else { 




$ok = substr($rest, $find, 10); 

$nummer = substr($ok, 8, 1); 


?> 
            <option value="<?php echo $nummer ?>"<?php if ($selimg == $nummer) echo " selected" ?>><?php echo $db->f("beschreibung") ?> 
<? 

} 


} 

echo" </option> </select> "; 
echo"</td> 

</tr> 
<td></td><td></td> 
<td width=\"120\">Thumbnail Ordner</td> 

<td></td><td>Bitte wählen:<br><select name=\"CMS_VAR[9]\" size=\"1\">"; 
echo"<option value=\"kein\">-- kein --</option>"; 

$db  = new DB_Contenido; 
$query = "SELECT DISTINCT dirname FROM ".$cfg["tab"]["upl"]." ORDER BY dirname ASC"; 
$db->query($query); 
while ($db->next_record()) { 

?> 
            <option value="<?php echo $db->f("dirname") ?>"<?php if ($seldir == $db->f("dirname")) echo " selected" ?>><?php echo $db->f("dirname") ?></option> 
<?php 
   } 
echo "</select></td> 


<tr valign=\"top\"> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 

</tr> 
</table> 
"; //Ende 
Ausgabe:

Code: Alles auswählen

<? 
/*********************************************** 
* CONTENIDO MODUL - OUTPUT 
* 
* Erweiterte Artikel liste 
* 
* Liste von Artikeln mit mehreren Daten basierend 
* auf 4fb referenz modul 
* 1.Gibt die Subheadline eines Artikel mit aus 
* 2.Anschnitte nur nach ganzen Wörtern 
* 3.Thumnails werden vernünftig berechnet 
* 4.Image für Erzeugung von Thumbs kann gewählt werden 
* Author : Evert Smit / Dirk Uptmoor / Peter Beauvain 
* Copyright : None 
* Created : 13-07-03 
* Modified : 16-08-02 /20-09-03 upt /02-02-04 Beau 
*Modified by Matthias Nettekoven 26.08.2005
************************************************/ 
//Frontendpfad ermitteln 
$query = "SELECT frontendpath FROM ".$cfg["tab"]["clients"]." WHERE idclient='".$client."'"; 
$db->query($query); 
$db->next_record(); 
$frontendpath = $db->f("frontendpath"); 



$startarton = "AND CATART.is_start = '0' AND"; 

//soll der startartikel mit ausgegeben werden?. 
$print_startartikel = "CMS_VALUE[14]"; 
if($print_startartikel !=""){ 
$startarton = "AND"; 

} 

//die Überschrift wird ausgegeben wenn sie nicht leer ist. 
$print_mainheadline = "CMS_VALUE[2]"; 

//soll headline ausgegeben werden? 
$print_headline = "CMS_VALUE[4]"; 

//soll subheadline ausgegeben werden? 
$print_subheadline = "CMS_VALUE[5]"; 

//soll text ausgegeben werden? 
$print_text = "CMS_VALUE[12]"; 

//soll ein thumnail ausgegeben werden? 
$print_thumbnail = "CMS_VALUE[7]"; 

//thumbnail breite 
$thumbnail_width = "CMS_VALUE[8]"; 

//wenn thumbnails = 0 
$imagetag = ""; 



// second db class instance 
$db2 = new DB_Contenido; 

// selected category 
$selcat = "CMS_VALUE[0]"; 

if($selcat!="0" && $selcat!=""){ 

// select all articles in category widthout start article 
$query = "SELECT ARTLANG.idart, ARTLANG.idartlang, ARTLANG.lastmodified FROM ".$cfg["tab"]["cat_art"]." AS CATART, ". 
$cfg["tab"]["art_lang"]." AS ARTLANG ". 
"WHERE CATART.idcat = '$selcat' AND ARTLANG.idart = CATART.idart AND ARTLANG.idlang = '$lang' "." $startarton " ."ARTLANG.online = '1' ORDER BY ARTLANG.lastmodified DESC"; 

// execute query 
$db->query($query); 

unset($articleID); 
unset($linkID); 

// get id's of sub articles 
while ($db->next_record()) { 
$articleID[] = $db->f("idartlang"); 
$linkID[] = $db->f("idart"); 
} // end while 


/****************** start table **************************/ 
echo ' 
<table border="0" cellpadding="0" cellspacing="0" class="maintext" width="200"><tr><td>'; 


/**** Überschrift der Artikelliste wird ausgegeben, wenn nicht leer ********/ 

if($print_mainheadline !=""){ 
echo ' 
<tr> 
<td colspan="2">&nbsp;CMS_VALUE[2] <br></td> 
<td align="right"></td> 
</tr>
<tr> 
<td class="text">&nbsp;</td> 
<td align="right"></td> 
</tr> 
'; 
} 
if($print_mainheadline ==""){ 
echo ' 
<tr> 
<td class="text">&nbsp; </td> 
<td align="right"> </td> 
</tr> 
'; 
} 



// Loop through articles 
if (is_array($articleID)) { 
foreach ($articleID as $key => $value) { 
// select all CMS variables of the article 

if($print_headline!="0" && $print_headline!=""){ 
$sql = "SELECT * FROM ".$cfg["tab"]["content"]." WHERE idartlang = '$value' AND idtype = '1' AND typeid = '1'"; 

$db->query($sql); 
$db->next_record(); 


$headline = urldecode($db->f("value")); 



for ($j="CMS_VALUE[3]"; $j < "CMS_VALUE[3]"+20; $j++) 
{ 
$headline1 = substr($headline , 0, $j); 

$cut = substr($headline, $j); 
if ((ord ($cut) == 32)||(ord ($cut) == 44)||(ord ($cut) == 45)) { 

$headline= substr($headline , 0, $j); 
$headline .= ' .....'; 
} 
} 
} 




$cfgTab_art_lang = $cfg['tab']['art_lang']; 
$cfgTab_content = $cfg['tab']['content']; 

$sql = "SELECT A.author AS author, B.lastmodified AS lastmod FROM $cfgTab_art_lang AS A, $cfgTab_content AS B WHERE A.idart='$value' AND B.idartlang=A.idartlang ORDER BY B.lastmodified DESC"; 
$db->query($sql);$db->next_record(); 
$modifydate= date("d.m.y",strtotime($db->f("lastmod"))); 
$modifytime= date("H:i",strtotime($db->f("lastmod"))); 






if($print_subheadline!="0" && $print_subheadline!=""){ 
$sql_subheadline = "SELECT * FROM ".$cfg["tab"]["content"]." WHERE idartlang = '$value' AND idtype = '1' AND typeid = '2'"; 

$db->query($sql_subheadline); 
$db->next_record(); 

$subheadline = urldecode($db->f("value")); 


for ($i="CMS_VALUE[6]"; $i < "CMS_VALUE[6]"+20; $i++) 
{ 
$subheadline1 = substr($subheadline , 0, $i); 

$cut = substr($subheadline, $i); 
if ((ord ($cut) == 32)||(ord ($cut) == 44)||(ord ($cut) == 45)) { 

$subheadline= substr($subheadline , 0, $i); 
$subheadline .= ' .....'; 
} 
} 
} 

if($print_text!="0" && $print_text!=""){ 
$sql_text = "SELECT * FROM ".$cfg["tab"]["content"]." WHERE idartlang = '$value' AND idtype = '2' AND typeid = '1'"; 

$db->query($sql_text); 
$db->next_record(); 

$text = urldecode($db->f("value")); 


for ($i="CMS_VALUE[13]"; $i < "CMS_VALUE[13]"+20; $i++) 
{ 
$text1 = substr($text , 0, $i); 

$cut = substr($text, $i); 
if ((ord ($cut) == 32)||(ord ($cut) == 44)||(ord ($cut) == 45)) { 

$text= substr($text , 0, $i); 
$text .= ' .....'; 
} 
} 
} 



/******************* begin thumbnails **********************************/ 
if($print_thumbnail !="0" && $print_thumbnail !=""){ 

// select and resolve image path 
$imagesql="select value from ".$cfg["tab"]["content"]." where idartlang='$value' and idtype='4' and typeid='CMS_VALUE[11]'"; 
$db2->query($imagesql); 
$db2->next_record(); 
$image_id= $db2->f("value"); 


// get image name and path 
$imagesql="select * from ".$cfg["tab"]["upl"]." where idupl='$image_id'"; 
$db2->query($imagesql); 
$db2->next_record(); 


$webdir='upload/'; 
$thumbdir='CMS_VALUE[9]'; 
$filedir=$frontendpath; 
$imagelocation=$filedir.$webdir.$db2->f('dirname').$db2->f('filename'); 
$thumblocation=$filedir.$webdir.$thumbdir.$db2->f('filename'); 
if (!file_exists($thumblocation)){ 
// create thunbnail 
$fileinformation=getimagesize($imagelocation); 
$imagewidth = $fileinformation[0]; 
$imageheight = $fileinformation[1]; 
$imagetype=$db2->f('filetype'); 
$imageattributes = $fileinformation[3]; 
//$newfile= $last_id."-image.".$imagetype; 
$target=$thumblocation; 

if ( !(copy($imagelocation,$target))) 
{ 
echo "Could not copy file to destintaion., Command returned Error Message. Please check your log files. ".$imagelocation." ".$target; 
die; 
} 

//create thumbnails 80xrelational height; neu $thumbnail_width x proportionale Höhe 
// Determine what filetype and set pointer to source image 


$original_image=ImageCreateFromJPEG($target); 

if (!$original_image){ 
echo 'Error getting image from '.$target.'.'; 
} 



$palette_image =$filedir.$webdir.$thumbdir.'vorlage3.jpg'; 
$thumbsize = getImageSize($palette_image); 
$maxdim = $thumbsize[0]; 
$draw_from = $imagelocation; 
$dim = GetImageSize($draw_from); 
if($dim[0]>$dim[1]) 
{ 
$to_w = $maxdim; 
$to_h = round($dim[1]*($maxdim/$dim[0])); 
$to_x = 0; 
$to_y = round($maxdim-$to_h)/2; 
} 
else 
{ 
$to_h = $maxdim; 
$to_w = round($dim[0]*($maxdim/$dim[1])); 
$to_y = 0; 
$to_x = round($maxdim-$to_w)/2; 
} 

if($dim[2]==1) {$from = ImageCreateFromGIF($draw_from);} 
elseif($dim[2]==2) {$from = ImageCreateFromJPEG($draw_from);} 
elseif($dim[2]==3) {$from = ImageCreateFromPNG($draw_from);} 
$thumb = ImageCreateFromJPEG($palette_image); 
// $set_bg_colour = ImageColorAllocate($thumb,255,0,0); 
// $fill_bg_colour = ImageFill($thumb,0,0,$set_bg_colour); 
imagecopyresampled($thumb, $from, $to_x, $to_y, 0, 
0, $to_w, $to_h, $dim[0], $dim[1]); 






//echo $target; 
// set image width and height of thunbnail and put pointer for filesytsem 
$thumbfile= $db2->f('filename'); 
$target_thumb=$thumblocation; 
$t_width=$thumbnail_width; 
// calculating height to maintain ratio 
$t_height=($thumbnail_width/$imagewidth)*$imageheight; 
// remove digits to get solid number 
list ($t_height,$notimportand)=explode('.',$t_height); 
// create blank image 
$thumb_image=imagecreatetruecolor($t_width,$t_height); 
// $thumb_image=imagecreate($t_width,$t_height); 
// $thumb_image=ImageCreateFromJPEG($palette_image); 
// resize image based on height and width 
imagecopyresampled($thumb_image,$original_image,0,0,0,0,$t_width,$t_height,$imagewidth,$imageheight); 
// store image on file system 
// requires different functionf for either gif or jpeg 

imagejpeg($thumb,$target_thumb); 

imagedestroy($thumb); 
imagedestroy($original_image); 
} 
$image=$webdir.$thumbdir.$db2->f('filename'); 

//wenn Artikel kein Bild hat 

if (!$db2->f('filename')){ 
$image=$webdir.$thumbdir.'vorlage.jpg'; 
} 
//Ende 

$imagetag="<img src=\" $image \" border=0>"; 

} // ende wenn keine thumbs gewünscht 
/**************** Ende Thumbnails ***********************/ 

// link 
$link = $sess->url("front_content.php?client=$client&lang=$lang&idcat=$selcat&idart=$linkID[$key]&m=$m&s=$s"); 



/***********************Anfang Tablezeile für Artikelliste**********************/ 
echo ' 

    <a href="'.$link.'" onmouseover="return escape(\''.$headline.'<br>'.$text.'\')">'.$imagetag.'</a>
'; 


} // end while 



unset($headline); 
unset($headline1); 
unset($subheadline); 
unset($subheadline1); 
unset($text); 
unset($textl); 

} // end foreach 

} // end if (is_array) 

echo '</td></tr></table>'; 
/***********************ende Table**********************/ 

?> 

Die Subheadline befindet sich im Moment nicht in diesem Script, lässt sich aber durch die Variable '.$subheadline.' einbauen.

Anregungen und Verbesserungen sind gerne willkommen![/code]
Zuletzt geändert von m2Designer am Mo 29. Aug 2005, 11:15, insgesamt 1-mal geändert.
i-fekt
Beiträge: 1520
Registriert: Mo 3. Jan 2005, 02:15
Wohnort: Chemnitz
Kontaktdaten:

Beitrag von i-fekt »

Im Firefox funktioneirt das nicht, das solltest du noch zurechtbauen. ;)
Gruss,
Michael

"Keep on riding this Bike!" (Jackson Mulham)
m2Designer
Beiträge: 41
Registriert: Mo 23. Aug 2004, 09:47
Kontaktdaten:

Beitrag von m2Designer »

Argh, ich schau mal woran es liegt :?
Gesperrt