Autor |
Nachricht |
-
sassis-grusskarten
|
07.09.2007 um 23:48 (UTC) Titel: text anzeigen |
|
|
hallo
ich hätte gerne, dass bei den bildern (auf meiner grusskartenseite) ein text erscheint, wenn ich mit dem mousezeiger draufhalte. wie kann ich das denn machen?
kann mir das jemand anhand dieses beispiels vorzeigen?
<a target="_blank" href="http://www.ecards4u.de/karte.php?user=sassi&action=create&card=http://img.webme.com/pic/s/sassis-grusskarten/wibkegoldgr.jpg"><img height="155" alt="" width="194" src="http://img.webme.com/pic/s/sassis-grusskarten/wibkegoldkl.jpg" /></a><br />
geht das ? *hoff*
lg sassi |
|
↑
|
|
|
-
kleen-marcus
|
07.09.2007 um 23:50 (UTC) Titel: Re: text anzeigen |
|
|
sassis-grusskarten hat Folgendes geschrieben: hallo
ich hätte gerne, dass bei den bildern (auf meiner grusskartenseite) ein text erscheint, wenn ich mit dem mousezeiger draufhalte. wie kann ich das denn machen?
kann mir das jemand anhand dieses beispiels vorzeigen?
<a target="_blank" href="http://www.ecards4u.de/karte.php?user=sassi&action=create&card=http://img.webme.com/pic/s/sassis-grusskarten/wibkegoldgr.jpg"><img height="155" alt="" width="194" src="http://img.webme.com/pic/s/sassis-grusskarten/wibkegoldkl.jpg" /></a><br />
geht das ? *hoff*
lg sassi |
|
↑
|
|
|
-
sassis-grusskarten
|
07.09.2007 um 23:54 (UTC) Titel: |
|
|
der text, der auf der karte steht soll angezeigt werden, da man ihn auf dem kleinen vorschaubild http://img.webme.com/pic/s/sassis-grusskarten/wibkegoldkl.jpg nicht richtig lesen kann.
wenn der user also mit der mouse zu der karte hinfährt soll der text erscheinen, der auf der karte draufsteht. so braucht er nicht jede karte öffnen um zu sehen was draufsteht.
In dem Fall ein ziemlich langer Text "Die Katze hört es gern wenn du sie ruft usw."
Zuletzt bearbeitet von sassis-grusskarten am 08.09.2007, 00:55, insgesamt einmal bearbeitet
|
|
↑
|
|
|
-
html-papst
Wohnort: Flensburg
|
08.09.2007 um 07:13 (UTC) Titel: Hi sassi! |
|
|
Ist eigentlich recht einfach!
Es gibt verschiedene Möglichkeiten dies umzusetzten.
1. Möglichkeit:
Bei einer geringen Anzahl an Wörtern die angezeigt werden sollen, reicht es wenn man nur den "title-tag" benutzt.
Html-Papst hat Folgendes geschrieben:
Beispiel:
<img src="DeinBild.png" title="DeinTextHierRein!">
2. Möglichkeit:
Kopiere Dir den folgenden Code in Deine Seite und Du hast einen vernünftigen Tooltip!
DEMO: http://www.martin.weltherrschaft-an-sich-reissen.de/www.Klick-Game.de/images/cheater/index.php
Diesen Teil musst Du zwischen <head> und </head> reinkopieren!
Code:
<style type="text/css">
/*
Bilder-Info Anzeige (Tooltipp)
Visit http://www.Html-Papst.de
*/
#dhtmltooltip{
position: absolute;
width: 150px;
border: 2px solid black;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}
</style>
Den folgenden Code musst Du zwischen <body> und </body> setzten!
Code:
<div id="dhtmltooltip"></div>
<script type="text/javascript">
/***********************************************
* Cool DHTML tooltip script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
var offsetxpoint=-60 //Customize x offset of tooltip
var offsetypoint=20 //Customize y offset of tooltip
var ie=document.all
var ns6=document.getElementById && !document.all
var enabletip=false
if (ie||ns6)
var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""
function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function ddrivetip(thetext, thecolor, thewidth){
if (ns6||ie){
if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
tipobj.innerHTML=thetext
enabletip=true
return false
}
}
function positiontip(e){
if (enabletip){
var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
//Find out how close the mouse is to the corner of the window
var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20
var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<tipobj.offsetWidth)
//move the horizontal position of the menu to the left by it's width
tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
else if (curX<leftedge)
tipobj.style.left="5px"
else
//position the horizontal position of the menu where the mouse is positioned
tipobj.style.left=curX+offsetxpoint+"px"
//same concept with the vertical position
if (bottomedge<tipobj.offsetHeight)
tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"
else
tipobj.style.top=curY+offsetypoint+"px"
tipobj.style.visibility="visible"
}
}
function hideddrivetip(){
if (ns6||ie){
enabletip=false
tipobj.style.visibility="hidden"
tipobj.style.left="-1000px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}
}
document.onmousemove=positiontip
</script>
Damit auch alle Infos angezeigt werden können, musst Du bei deinen Bildern (<im src="bild.png>") folgendes hinzufügen!
Code: onMouseover="ddrivetip('HIER_KOMMT_DEIN_TEXT_REIN','yellow', 300)";
onMouseout="hideddrivetip()"
So sollte dann der fertige Code aussehen!
Code:
<img src="DeinBild.png" onMouseover="ddrivetip('HIER_KOMMT_DEIN_TEXT_REIN', 'yellow', 250)";
onMouseout="hideddrivetip()">
Hier kannst Du Dir das mal anschauen, wie das aussieht:
DEMO: http://www.martin.weltherrschaft-an-sich-reissen.de/www.Klick-Game.de/images/cheater/index.php
PS: Helfe gern weiter! ______________ Follow me via Twitter: @MrKenobi
Html-Papst.de.tl wird nicht mehr gewartet.
Zuletzt bearbeitet von html-papst am 08.09.2007, 08:59, insgesamt 5-mal bearbeitet
|
|
↑
|
|
|
-
carphuntingteam-lafamilia
|
02.01.2009 um 12:06 (UTC) Titel: |
|
|
wo muß der text eingefügt werden??? im text unter dem design oder wo anders? ______________ Carphuntingteam-Lafamilia Südhessen |
|
↑
|
|
|
-
koivin
|
|
↑
|
|
|
-
html-papst
Wohnort: Flensburg
|
03.01.2009 um 20:06 (UTC) Titel: |
|
|
Hi carphuntingteam-lafamilia,
vielen dank für deine email.
Kopiere einfach den kompletten code in die Box "Text über dem Design:" rein.
Code:
<style type="text/css">
/* Tooltip ~ Visit Html-Papst.de */
#dhtmltooltip{
position: absolute;
width: 150px;
border: 2px solid black;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}
</style>
<div id="dhtmltooltip"></div>
<script type="text/javascript">
/***********************************************
* Cool DHTML tooltip script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
var offsetxpoint=-60 //Customize x offset of tooltip
var offsetypoint=20 //Customize y offset of tooltip
var ie=document.all
var ns6=document.getElementById && !document.all
var enabletip=false
if (ie||ns6)
var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""
function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function ddrivetip(thetext, thecolor, thewidth){
if (ns6||ie){
if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
tipobj.innerHTML=thetext
enabletip=true
return false
}
}
function positiontip(e){
if (enabletip){
var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
//Find out how close the mouse is to the corner of the window
var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20
var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<tipobj.offsetWidth)
//move the horizontal position of the menu to the left by it's width
tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
else if (curX<leftedge)
tipobj.style.left="5px"
else
//position the horizontal position of the menu where the mouse is positioned
tipobj.style.left=curX+offsetxpoint+"px"
//same concept with the vertical position
if (bottomedge<tipobj.offsetHeight)
tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"
else
tipobj.style.top=curY+offsetypoint+"px"
tipobj.style.visibility="visible"
}
}
function hideddrivetip(){
if (ns6||ie){
enabletip=false
tipobj.style.visibility="hidden"
tipobj.style.left="-1000px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}
}
document.onmousemove=positiontip
</script>
Damit der Tooltip auch wirklich funktioniert musst du bei deinen Bildern noch folgenden code ranhängen.
Code: onMouseover="ddrivetip('HIER_KOMMT_DEIN_TEXT_REIN', 'yellow', 250)";
onMouseout="hideddrivetip()"
Zitat:
<img src="DeinBild.jpg" onMouseover="ddrivetip('HIER_KOMMT_DEIN_TEXT_REIN', 'yellow', 250)";
onMouseout="hideddrivetip()">
Danach geht das auch.
Ach ähm, du solltest vielleicht mal ein Impressum bei dir reinstellen.
Nur so zur Info. xD
@ koivin
Das was du suchst nennt man auch einfach nur Texter.
Gruss, Martin
______________ Follow me via Twitter: @MrKenobi
Html-Papst.de.tl wird nicht mehr gewartet.
Zuletzt bearbeitet von html-papst am 03.01.2009, 21:23, insgesamt 3-mal bearbeitet
|
|
↑
|
|
|
|