Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML] Najazd na tekst i pokazanie się obrazka?
Forum PHP.pl > Forum > Przedszkole
Anonim$$
Cze, mam problem z pewną sprawą. Chce zrobić taki mik, że jak najadę kursorem na tekst przykładowo "Tutaj", ukaże mi się okienko zaraz obok niego i to będzie zdjęcie które wybiorę, macie tutaj przykład:



Tutaj akurat jest to zrobione że jak najedzie się na obrazek, ale ja chce jak na tekst.
Maxik
Słowo klucz: "Tooltip"
Anonim$$
jak dokładnie to zrobić? opisz.
Spawnm
wpisujesz w google Tooltip i klikasz szukaj sciana.gif
Anonim$$
nie mogę tego jakoś poskładać w całość. >.<
Fafu
http://blog.innerewut.de/tooltip
Jak znasz podstawy angielskiego to sobie poradzisz.
pozdrawiam
Fifi209
A może tak daj np. <p class="tekst">tekst</p>

i w css np.

#tekst:hover {
background: img(test.jpg);
}

przykładowo ;d
TheaSiX
  1. <script type="text/javascript">
  2.  
  3. /***********************************************
  4. * Fixed ToolTip script- Š Dynamic Drive (www.dynamicdrive.com)
  5. * This notice MUST stay intact for legal use
  6. * Visit http://www.dynamicdrive.com/ for full source code
  7. ***********************************************/
  8.  
  9. var tipwidth='150px' //default tooltip width
  10. var tipbgcolor='#c7d1d7' //tooltip bgcolor
  11. var disappeardelay=50 //tooltip disappear speed onMouseout (in miliseconds)
  12. var vertical_offset="8px" //horizontal offset of tooltip from anchor link
  13. var horizontal_offset="-25px" //horizontal offset of tooltip from anchor link
  14.  
  15. /////No further editting needed
  16.  
  17. var ie4=document.all
  18. var ns6=document.getElementById&&!document.all
  19.  
  20. if (ie4||ns6)
  21. document.write('<div id="fixedtipdiv" style="visibility:hidden;width:'+tipwidth+';background-color:'+tipbgcolor+'" ></div>')
  22.  
  23. function getposOffset(what, offsettype){
  24. var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
  25. var parentEl=what.offsetParent;
  26. while (parentEl!=null){
  27. totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
  28. parentEl=parentEl.offsetParent;
  29. }
  30. return totaloffset;
  31. }
  32.  
  33.  
  34. function showhide(obj, e, visible, hidden, tipwidth){
  35. if (ie4||ns6)
  36. dropmenuobj.style.left=dropmenuobj.style.top=-500
  37. if (tipwidth!=""){
  38. dropmenuobj.widthobj=dropmenuobj.style
  39. dropmenuobj.widthobj.width=tipwidth
  40. }
  41. if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
  42. obj.visibility=visible
  43. else if (e.type=="click")
  44. obj.visibility=hidden
  45. }
  46.  
  47. function iecompattest(){
  48. return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
  49. }
  50.  
  51. function clearbrowseredge(obj, whichedge){
  52. var edgeoffset=(whichedge=="rightedge")? parseInt(horizontal_offset)*-1 : parseInt(vertical_offset)*-1
  53. if (whichedge=="rightedge"){
  54. var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
  55. dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
  56. if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
  57. edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
  58. }
  59. else{
  60. var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
  61. dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
  62. if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure)
  63. edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
  64. }
  65. return edgeoffset
  66. }
  67.  
  68. function fixedtooltip(menucontents, obj, e, tipwidth){
  69. if (window.event) event.cancelBubble=true
  70. else if (e.stopPropagation) e.stopPropagation()
  71. clearhidetip()
  72. dropmenuobj=document.getElementById? document.getElementById("fixedtipdiv") : fixedtipdiv
  73. dropmenuobj.innerHTML=menucontents
  74.  
  75. if (ie4||ns6){
  76. showhide(dropmenuobj.style, e, "visible", "hidden", tipwidth)
  77. dropmenuobj.x=getposOffset(obj, "left")
  78. dropmenuobj.y=getposOffset(obj, "top")
  79. dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
  80. dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
  81. }
  82. }
  83.  
  84. function hidetip(e){
  85. if (typeof dropmenuobj!="undefined"){
  86. if (ie4||ns6)
  87. dropmenuobj.style.visibility="hidden"
  88. }
  89. }
  90.  
  91. function delayhidetip(){
  92. if (ie4||ns6)
  93. delayhide=setTimeout("hidetip()",disappeardelay)
  94. }
  95.  
  96. function clearhidetip(){
  97. if (typeof delayhide!="undefined")
  98. clearTimeout(delayhide)
  99. }
  100.  
  101. </script>


i w odnosniku dodajesz:
  1. onMouseover="fixedtooltip('$shop', this, event, '65px')"
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.