Seite 1 von 2
Suche Modul zur Erstellung von MouseOver Grafiken
Verfasst: Mo 5. Jun 2006, 13:38
von llaron
Hallo,
gibts für die Version 4.6.8 ein Modul in dem ich 2 Bilder für einen MouseOver Effekt mittels Container in die Seite einbinden kann? Nutzbar für eine Navigation als Bsp...
Ne reine Grafiknavigation, der man auch ein MouseOver Bild zuweisen kann (wie bei Typo3) wäre natürlich am geilsten...gibts sowas schon?
Gruß
Nico
Verfasst: Mo 5. Jun 2006, 13:48
von i-fekt
Dazu musst du nur das Modul
"Headlines als Bild generieren" in die Hauptnavigation einbauen, sollte recht schnell gehen.
Verfasst: Mo 5. Jun 2006, 14:50
von llaron
Danke, das Ding ist ja der Hammer!
Verfasst: Di 6. Jun 2006, 15:38
von HerrB
Aber eigentlich nicht das, was Du suchst... oder? Mit MouseOver hat das nichts zu tun - daraus kann man "nur" aus einem Text ein Bild machen...
Gruß
HerrB
Verfasst: Di 6. Jun 2006, 15:43
von llaron
Das stimmt, aber trotzdem ein super teil..spart ne Menge Zeit, nur Umlaute gehen nicht...! Hast Du noch ein MouseOver Modul zu bieten?
Gruß
Verfasst: Di 6. Jun 2006, 15:50
von HerrB
Nein, der Hinweis war mehr an andere gedacht, die nach dem gleichen Problem suchen...
Gruß
HerrB
Verfasst: Di 6. Jun 2006, 16:04
von i-fekt
Mit dem Code des Textmakers kannst du rcht einfach ein Grafik-MouseOver-Menü machen.
Verfasst: Di 6. Jun 2006, 16:08
von llaron
fragt sich nur wie, Ansatz? Bin leider kein Entwickler...Muttersprache nur HTML und CSS
Verfasst: Di 6. Jun 2006, 17:13
von Uwe
Was hast Du denn genau vor, grosser Meister
Grüsse aus Konstanz, Uwe
Verfasst: Di 6. Jun 2006, 20:06
von mvf
hier mal ein schnelles
beispiel anhand des standard moduls illustration
voraussetzung ist, dass zu jedem bild dass gewählt wird auch ein pendant mit dem zusatz _over im namen existiert
meinImage.gif
meinImage_over.gif
input bleibt gleich (der vollständigkeit halber nochmal der code)
Code: Alles auswählen
?><?php
/***********************************************
* CONTENIDO MODUL - INPUT
*
* Modulname : Illustration
* Author(s) : Andreas Lindner, 4fb
* Copyright : Contenido - four for business, Andreas Lindner
* Created : 12.08.2005
************************************************/
#Selected img directory
$cms_dirname = "CMS_VALUE[1]";
#Selected img
$cms_filename = "CMS_VALUE[2]";
if ($cms_dirname == '' || $cms_dirname == '0') {
$cms_dirname = 'bilder/';
}
#Get paths
$sql = "SELECT
htmlpath, frontendpath
FROM
".$cfg["tab"]["clients"]."
WHERE
idclient = ".$client." ";
$db->query($sql);
if ($db->next_record()) {
$htmlpath = $db->f('htmlpath');
$frontendpath = $db->f('frontendpath');
}
#Choose image folder
echo '<table cellpadding="0" cellspacing="0" border="0">
<tr><td class="text_medium" style="padding:5px">'.mi18n("Das Bild soll folgende Größe haben: 170 x 80 px").'</td></tr>
<tr><td class="text_medium" style="padding:5px">'.mi18n("Bildverzeichnis wählen").': </td></tr>
<tr><td class="text_medium" style="padding:5px">';
echo '<select name="CMS_VAR[1]" style="width:200px">';
#Get upload directories
$sql = "SELECT DISTINCT
dirname
FROM
".$cfg["tab"]["upl"]."
WHERE
idclient='$client' AND
filetype IN ('jpeg','jpg','gif','png')
ORDER BY
dirname";
$db->query($sql);
$selected = false;
while ($db->next_record()) {
$dirname = $db->f('dirname');
if ($cms_dirname != $dirname) {
echo '<option value="'.$dirname.'"> '.$dirname.'</option>';
} else {
$selected = true;
echo '<option value="'.$dirname.'" selected="selected"> '.$dirname.'</option>';
}
}
if (!$selected) {
echo '<option value="0" selected="selected">'.i18n("Bitte wählen").'</option>';
} else {
echo '<option value="0">'.i18n("Bitte wählen").'</option>';
}
#Choose image file
echo '</select> <input type="image" src="images/submit.gif">
<tr><td class="text_medium" style="padding:5px">'.mi18n("Bild wählen").': </td></tr>
<tr><td class="text_medium" style="padding:5px">';
echo '<select name="CMS_VAR[2]" style="width:200px">';
echo '<option value="0" selected="selected">'.i18n("Bitte wählen").'</option>';
if ($cms_dirname != '0') {
#Get uploaded files
$sql = "SELECT
filename
FROM
".$cfg["tab"]["upl"]."
WHERE
idclient = '$client' AND
filetype IN ('jpeg','jpg','gif','png','swf') AND
dirname = '$cms_dirname'
ORDER BY
filename";
$db->query($sql);
while ($db->next_record()) {
$img_name = $db->f('filename');
if ($cms_filename != $img_name) {
echo '<option value="'.$img_name.'"> '.$img_name.'</option>';
} else {
echo '<option selected="selected" value="'.$img_name.'"> '.$img_name.'</option>';
}
}
}
echo '</select> <input type="image" src="images/submit.gif">';
#Preview image
if ($cms_dirname != '0' AND $cms_filename != '0' AND strlen($cms_dirname) > 0 AND strlen($cms_filename) > 0) {
$img_path = $htmlpath.$cfgClient[$client]['upload'].$cms_dirname.$cms_filename;
$img_split = preg_split("/\./", $cms_filename);
$count = count($img_split);
$type = $img_split[$count -1];
echo '<tr><td colspan="2" style="padding:5px">
<img src="'.$img_path.'">
</td></tr> ';
}
echo '</td></tr>';
echo '</table>';
?><?php
neuer output:
Code: Alles auswählen
<?php
/***********************************************
* CONTENIDO MODUL - OUTPUT
*
* Modulname : Illustration
* Author(s) : Andreas Lindner, 4fb
* Copyright : Contenido - four for business, Andreas Lindner
* Created : 12.08.2005
************************************************/
#Selected img directory
$cms_dirname = "CMS_VALUE[1]";
#Selected img
$cms_filename = "CMS_VALUE[2]";
#Default settings
$img_width = 170;
$img_height = 80;
$defaultImage = 'bilder/illu3.jpg';
$htmlpath = $cfgClient[$client]['path']['htmlpath'];
$frontendpath = $cfgClient[$client]['path']['frontend'];
$img_path = $htmlpath.$cfgClient[$client]['upload'].$defaultImage;
$img_path_fs = $frontendpath.$cfgClient[$client]['upload'].$defaultImage;
#Check configured images
if ($cms_dirname != '0' AND $cms_filename != '0' AND strlen($cms_dirname) > 0 AND strlen($cms_filename) > 0) {
$img_path = $htmlpath.$cfgClient[$client]['upload'].$cms_dirname.$cms_filename;
$img_path_fs = $frontendpath.$cfgClient[$client]['upload'].$cms_dirname.$cms_filename;
$img_split = preg_split("/\./", $cms_filename);
$count = count($img_split);
$type = $img_split[$count -1];
if (!file_exists($img_path_fs)) {
$img_path = $htmlpath.$cfgClient[$client]['upload'].$defaultImage;
$img_path_fs = $frontendpath.$cfgClient[$client]['upload'].$defaultImage;
}
}
$arr_split = explode (".", $img_path_fs);
$extension = array_pop ($arr_split);
$img_path_fs_over = implode(".",$arr_split) . "_over." . $extension;
#Scale image
$image = capiImgScale($img_path_fs, $img_width, $img_height, false, false, 10, false);
$image_over = capiImgScale($img_path_fs_over, $img_width, $img_height, false, false, 10, false);
#Get dimensions of scaled image
list ($width, $height, $type, $attr) = getimagesize($image);
#Output image tag
echo '<img onmouseover="this.src=\''.$image_over.'\';" onmouseout="this.src=\''.$image.'\';" src="'.$image.'" width="'.$width.'" height="'.$height.'" alt="'.mi18n("Illustration").'" title="'.mi18n("Illustration").'"/>';
?>
(merci stese
)
Verfasst: Di 6. Jun 2006, 20:14
von Beleuchtfix
schaut einmal unter
http://www.csszengarden.com/tr/deutsch/
Snoopy macht geniale Dinge nur mit CSS. Es gibt die Möglichkeit mit CSS Texte durch Grafik auszutauschen.
Gruß
Florian
Verfasst: Do 8. Jun 2006, 17:02
von llaron
Gruß ditsch Uwe,
so Module sind immer gut zu gebrauchen.
Kleiner Nachtrag, um das dynamische Textmodul XHTML Konform zu machen:
Modul Ausgabe:
Code: Alles auswählen
<?php
if (!$edit) {
if ("CMS_HTMLHEAD[1]" != "") {
echo '<img src="textmaker/text.php?text='.urlencode("CMS_HTMLHEAD[1]").'" alt="'.urlencode("CMS_HTMLHEAD[1]").'" />';
}
} else {
echo "CMS_HTMLHEAD[1]";
}
?>
Verfasst: Do 8. Jun 2006, 17:30
von llaron
@ mvf
würdest Du das Modul veröffentlichen?
Super, wenn das nur auf CSS basiert...
http://condemo.funjumping.de/cat-1/test.html
Merci + Gruß
Nico
Verfasst: Do 8. Jun 2006, 17:42
von mvf
das liegt nicht am modul sondern nud am css, dass kann man sich von direkt hier holen
http://www.cssplay.co.uk/menus/flyout_horizontal.html
Verfasst: Do 8. Jun 2006, 18:07
von Dodger77
Mit veröffentlichen würde ich vorsichtig sein. Siehe Copyright:
http://www.cssplay.co.uk/menus/flyout_horizontal.html