Suche Modul zur Erstellung von MouseOver Grafiken

[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

[i-fekt]

Dazu musst du nur das Modul "Headlines als Bild generieren" in die Hauptnavigation einbauen, sollte recht schnell gehen.

[llaron]

Danke, das Ding ist ja der Hammer!

[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

[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ß

[HerrB]

Nein, der Hinweis war mehr an andere gedacht, die nach dem gleichen Problem suchen...

Gruß
HerrB

[i-fekt]

Mit dem Code des Textmakers kannst du rcht einfach ein Grafik-MouseOver-Menü machen.

[llaron]

fragt sich nur wie, Ansatz? Bin leider kein Entwickler...Muttersprache nur HTML und CSS

[Uwe]

Was hast Du denn genau vor, grosser Meister

Grüsse aus Konstanz, Uwe

[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.'">&nbsp;'.$dirname.'</option>';
	} else {
		$selected = true;
		echo '<option value="'.$dirname.'" selected="selected">&nbsp;'.$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>&nbsp;<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.'">&nbsp;'.$img_name.'</option>';
		} else {
			echo '<option selected="selected" value="'.$img_name.'">&nbsp;'.$img_name.'</option>';
		}
	}
}

echo '</select>&nbsp;<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 )

[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

[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]";
}
?>

[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

[mvf]

@ 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

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

[Dodger77]

@ 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

Mit veröffentlichen würde ich vorsichtig sein. Siehe Copyright:

http://www.cssplay.co.uk/menus/flyout_horizontal.html