Zum Inhalt springen

wt_csstooltip erweitern

Erstellt am 18. Dezember 2008 · Noch keine Antworten

Tags: Frage

Manthano ·

Hallo community,

ich habe die Extenion wt_csstooltip erweitert, sodass Tooltips auch bei Bildern mit entsprechendem title angezeigt wird.
Da der Tooltip immer an einer bestimmten Position auftaucht und dass bei Bildern teilweise sehr unschön ist, bin ich geneigt, nun doch etwas javascript einzusetzen, damit der Tooltip mit der Maus mitwandert.

Leider ist es nun so, dass immer nur der allererste Tolltip der Seite an die Javascriptfunktion übergeben wird. Fahre ich mit der Maus über einen weiter unten stehenden Link, erscheint als Tooltip immer nur der erste Tooltip.
Irgend wie kann ich mir vorstellen, dass es funktionieren könnte, wenn ich der JS-Funktion ebenfalls den von der Extension zurückgegebenen Text mit übergebe.
Leider bin ich in Typo3 noch ein rechter Neuling und weiß gar nicht wie ich das anstellen sollte. Ich poste hier mal eben das Template mit dem JS-Code:

<!-- ###TEMPLATE_TOOLTIP### begin -->
<script type="text/javascript">


box = null;

function makeBoxMovable(id)
{
	var element = document.getElementById(id);
	
	if (!element) return;
	if (!box)
	{
		box = new Object();
		box.element = element;
		box.xOrigin = element.offsetLeft;
		box.yOrigin = element.offsetTop;
		box.isActive = true;
	}
}

function resetBox(id)
{
	if (!box) return;
	box.isActive = false;
	if (box.element.id == id)
	{
		box.element.style.display = 'none';
		box.element.style.left = box.xOrigin + 'px';
		box.element.style.top = box.yOrigin + 'px';
	};
	box = null;
}

document.onmousemove = updatePosition;
function updatePosition(e)
{
	var x, y;
	if (document.all)
	{
		x = event.clientX + document.body.scrollLeft;
		y = event.clientY + document.body.scrollTop;
	} else
	{
		x = e.pageX;
		y = e.pageY;
	};
	
	if (box && box.isActive)
	{
		box.element.style.left = x + 10 + 'px';
		box.element.style.top = y + 10 + 'px';
		box.element.style.display = 'block';
	};
}


</script>

<a href="#" class="wt_csstooltip" onmouseover="javascript: makeBoxMovable('tooltip');" onmouseout="javascript: resetBox('tooltip');">
	###TITLE###
        <dfn>###REPLACE###</dfn>
</a>
<!-- ###TEMPLATE_TOOLTIP### end -->

Ich hoffe ich konnte mich verständlich ausdrücken und es hat jemand eine Idee. Auch für völlig neue Ansätze zu einer dynamischeren Positionierung des Tooltips wäre ich offen, denn das JS ist doch eigentlich recht unschön in einer css-Extension.

Falls Ihr noch weitere Infos braucht, dann einfach sagen, was.

Ich Poste auch einmal den Code, den ich der Extension hinzugefügt habe, vielleicht hat ja jemand Interesse daran oder aber Typo3-erfahrene sehen darin Probleme im Code im zusammenhang mit Typo3:

Folgenden Code habe ich in die class.tx_wtcsstooltip_pi1.php nach Zeile 117

$content = preg_replace('/'.trim($search).'(?=[^>]*<[^>]+>)/', trim($this->cObj->substituteMarkerArrayCached($template,$markerArray)), $content); // Replacement function

eingefügt:

  $i=0;
  $imageEnd=0;
  while($i==0){
	// Bild suchen				
	$imageStart=strpos($content,'<img',$imageend); ifis_numericimagestart="" imageend="strpos($content,'" />',$imageStart);
	$imageLength=($imageEnd+2)-$imageStart;
        $image=substr($content,$imageStart,$imageLength);
					
	// Titel suchen
	$titleStart=strpos($image,'title="');
	if(is_numeric($titleStart)){
	   $titleStart+=7;
	   $titleEnd=strpos($image,'"',$titleStart);
	   $titleLength=$titleEnd-$titleStart;
	   $title=substr($image,$titleStart,$titleLength);
	   if($search==$title){
		$markerArray['###TITLE###']=$image;
 $content=preg_replace('§'.$image.'§',trim($this->cObj->substituteMarkerArrayCached($template,$markerArray)), $content);
                 // Titel aus Bild entfernen
		$titleAtt=substr($image,$titleStart-7,$titleLength+8-);
		$newImage=str_replace($titleAtt,'',$image);
		$content=str_replace($image,$newImage,$content);
	    }
	}
     }else{
	$i=1;
     }
}

Vielen Dank schon mal im Voraus
und Gruß