alt & titel die sich mitbewegen!

[Darezettl]

Deine phpBB Version: Vanilla phpBB 2.0.18
MODs: Nein
Dein Wissensstand: Einsteiger
Link zu Deinem Forum: [url]http://[/url]

PHP Version:
MySQL Version:


Was hast Du gemacht, bevor das Problem aufgetreten ist?



Was hast Du bereits versucht um das Problem zu lösen?




Fehlerbeschreibung und Nachricht

ich bewundere schon seit langem das board von reddog ( http://www.reddevboard.com/forum/index.php ), es ist meiner Meinung nach eines der schönsten phpBBs ever.

wie hat er es gemacht, dass wenn man mit der maus über die link fährt, die anzeige, die dann kommt, sich mitbewegt?
würde das auch gerne in meinem board so machen.

auch hat er bei fast allen link so ne "hover"-anzeige, und die ist auch noch so bissl transparent.., wo ist da der ansatz das zu machen?


ach ja, falls es hilft: hier seine .css

[oxpus]

Das ist eher was für OverLib, diese Libary kann auch weit mehr, als es mit CSS möglich ist...

[Darezettl]

ja aber geht das mit css denn nicht?
hast du dir mal dem seine .css angeschaut?

[oxpus]

Sicher und hier auch der zuständige Part:

Code: Alles auswählen

div#tooltipDiv {
	padding: 3px;
	border: solid 1px #808080;
	display: none; /*white-space: nowrap;*/
	background: #FFF;
	color: #2B3D2B;
	font: 9px Verdana, Arial, Helvetica, sans-serif;
	text-align: left;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1000;
	filter: alpha(opacity=85);
	-moz-opacity: .85;
}

Also um den Part muss ein <div> ... </div> herum gebaut werden mit der ID "tooltipDiv".
Das funktioniert auch soweit, muss aber ggf. für diverse Browser angepasst werden.
Overlib kann aber deutlich mehr, wie man hier in der Memberliste anhand des Verifizierngsstatuses beispielsweise sehen kann. Dazu ist Overlib für wirklich alle Browser gleichermaßen funktionsfähig.

Mehr zu Overlib in der Suche hier. Das Thema hatten wir schon einmal ausführlicher

[Darezettl]

hä?
also ich hab jetzt mal diesen ausschnitt aus der css an das ende meiner css hinzugefügt.
und wie genau kann ich es nun ansteuern in den tpl-dateien?

hätte ganz am anfang der tpl datei ein <div id="tooltipDiv"> gesetzt und ganz ans ende wieder ein </div> aber es geht nicht

[oxpus]

Nein, nicht die ganze Datei damit umklammern, sondern nur den einen Link!

[Darezettl]

wenn ich es direkt vor nen link mach wird der gar nimmer angezeigt.

also zb. <div id="tooltipDiv"><span class="gen"><a href="{U_INDEX}">Index</a></span></div>

--> link verschwunden!

[oxpus]

?
Das widerspräche dann so ziemlich jeder HTML-Konvention, die ich kenne, daß der Link hiermit unsichtbar würde...

Häng doch mal die gesamte Datei an. Das muss ich mir anschauen

[Darezettl]

Habe den Mod gefunden, aber er funktioniert nicht.
Hier der Mod ( http://www.reddevboard.com/forum/viewtopic.php?t=1109 ), hier was ich gemacht hab (in englisch):

Hello Folks,

first of all, sorry that I write in english, but I don't speak french.
Okay, now to my problem:
I tried to install the Info bulle tranparente mod ( http://www.reddevboard.com/forum/viewtopic.php?t=1109 ) on my phpBB.
I created a tooltips.js with this content:

Code: Alles auswählen

// Coded by Travis Beckham
// Heavily modified by Craig Erskine
// extended to TagName img by reddog (and little personal tip)
tooltip = {
   name : "tooltipDiv",
   offsetX : -30,
   offsetY : 26,
   tip : null
};
tooltip.init = function () {

var tipNameSpaceURI = "http://www.w3.org/1999/xhtml";
if(!tipContainerID){ var tipContainerID = "tooltipDiv";}
var tipContainer = document.getElementById(tipContainerID);

if(!tipContainer){
  tipContainer = document.createElementNS ? document.createElementNS(tipNameSpaceURI, "div") : document.createElement("div");
  tipContainer.setAttribute("id", tipContainerID);
  tipContainer.style.display = "none";
  document.getElementsByTagName("body").item(0).appendChild(tipContainer);
}

   if (!document.getElementById) return;

   this.tip = document.getElementById (this.name);
   if (this.tip) document.onmousemove = function (evt) {tooltip.move (evt)};

   var a, sTitle;
   var anchors = document.getElementsByTagName ("a");

   for (var i = 0; i < anchors.length; i ++) {
      a = anchors[i];
      sTitle = a.getAttribute("title");
      if(sTitle) {
         a.setAttribute("tiptitle", sTitle);
         a.removeAttribute("title");
         a.removeAttribute("alt");
         a.onmouseover = function() {tooltip.show(this.getAttribute('tiptitle'))};
         a.onmouseout = function() {tooltip.hide()};
      }
   }

   var img, iTitle, iClass;
   var anchors = document.getElementsByTagName ("img");

   for (var i = 0; i < anchors.length; i ++) {
      img = anchors[i];
      iTitle = img.getAttribute("title");
      iClass = img.getAttribute("class");
      if(iTitle) {
         img.setAttribute("tiptitle", iTitle);
         img.removeAttribute("title");
         img.removeAttribute("alt");
         if (iClass == "gradualshine") {
            img.onmouseover = function() {tooltip.show(this.getAttribute('tiptitle')); slowhigh(this);};
            img.onmouseout = function() {tooltip.hide(); slowlow(this);};
         } else {
            img.onmouseover = function() {tooltip.show(this.getAttribute('tiptitle'))};
            img.onmouseout = function() {tooltip.hide()};
         }
      }
   }
};
tooltip.move = function (evt) {
   var x=0, y=0;
   if (document.all) {// IE
   
      x = (document.documentElement && document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft;
      y = (document.documentElement && document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop;
      x += window.event.clientX;
      y += window.event.clientY;
      
   } else {// Mozilla
      x = evt.pageX;
      y = evt.pageY;
   }
   this.tip.style.left = (x + this.offsetX) + "px";
   this.tip.style.top = (y + this.offsetY) + "px";
};
tooltip.show = function (text) {
   if (!this.tip) return;
   this.tip.innerHTML = text;
   this.tip.style.visibility = "visible";
   this.tip.style.display = "block";
};
tooltip.hide = function () {
   if (!this.tip) return;
   this.tip.style.visibility = "hidden";
   this.tip.style.display = "none";
   this.tip.innerHTML = "";
};

window.onload = function () {
   tooltip.init ();
}

then I saved it to phpbb_root/templates/

after that, I opened my overall_header.tpl, and inserted before </head> this line:

Code: Alles auswählen

<script language="javascript" type="text/javascript" src="templates/tooltips.js"></script>

okay, and at last i opened my .css file, and inserted this lines of code:

Code: Alles auswählen

div#tooltipDiv {
    padding: 3px;
    border: solid 1px #808080;
    display: none; /*white-space: nowrap;*/
    background: #FFF;
    color: #2B3D2B;
    font: 9px Verdana, Arial, Helvetica, sans-serif;
    text-align: left;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1000;
    filter: alpha(opacity=85);
    -moz-opacity: .85;
}

okay.. first of all: were all these steps correct? or did I make a mistake?

and secondly: it doesen't work on my phpBB.
after the modifications, I described above, the title tags are neither transparent nor they move with the mouse.



can you please explain, where I made the mistake?


Thank you in advance guys!!
Greetings, Darezettl

checkt jemand was ich falsch gemacht hab.
In der Anleitung steht nichts davon, dass noch was extra in die .tpl dateien eingefügt werden kann, soweit ich das mit dem google-übersetzer rauslesen konnt.
kann kein französisch.. entdeckt einer von euch den fehler??