Anzeige

Popup menü

Popup menü | PSD-Tutorials.de

Erstellt von ghost90, 02.08.2008.

  1. ghost90

    ghost90 Noch nicht viel geschrieben

    Dabei seit:
    21.06.2008
    Beiträge:
    29
    Geschlecht:
    männlich
    Popup menü
    Hallo Leute,


    Ich hab folgendes geplant:

    Ich hab ein Bild in einer Datenbank und dazu noch ein paar andere Daten.

    nun will ich das so machen:

    Man fährt mit der maus über das bild und dann geht ein Menü auf wo die anderen Daten dazu drin stehen.


    Hat einer einen Tip, oder ein gutes TUT ?
     
    #1      
  2. Scheini

    Scheini Noch nicht viel geschrieben

    Dabei seit:
    27.07.2008
    Beiträge:
    20
    Geschlecht:
    männlich
    Popup menü
    #2      
  3. ghost90

    ghost90 Noch nicht viel geschrieben

    Dabei seit:
    21.06.2008
    Beiträge:
    29
    Geschlecht:
    männlich
    Popup menü
    AW: Popup menü

    VIelen Dank


    nun hab ich ein Problem:

    Ich hab 3 Datenbanken, mit denen gearbeitet werden soll.

    In jedes Datenbank ist ein Element drin.

    nun möchte ich diese Elemente in das Script einbinden:


    messages[0] = new Array('red_balloon.gif','Here is a red balloon on a white background',"#FFFFFF");
    messages[1] = new Array('duck2.gif','Here is a duck on a light blue background.',"#DDECFF");
    messages[2] = new Array('test.gif','Test description','black','white');


    Komplettes Script:
    Code (Text):
    1. <script type="text/javascript">
    2.  
    3. /***********************************************
    4. * Image w/ description tooltip- By Dynamic Web Coding (www.dyn-web.com)
    5. * Copyright 2002-2007 by Sharon Paine
    6. * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    7. ***********************************************/
    8.  
    9. /* IMPORTANT: Put script after tooltip div or
    10.      put tooltip div just before </BODY>. */
    11.  
    12. var dom = (document.getElementById) ? true : false;
    13. var ns5 = (!document.all && dom || window.opera) ? true: false;
    14. var ie5 = ((navigator.userAgent.indexOf("MSIE")>-1) && dom) ? true : false;
    15. var ie4 = (document.all && !dom) ? true : false;
    16. var nodyn = (!ns5 && !ie4 && !ie5 && !dom) ? true : false;
    17.  
    18. var origWidth, origHeight;
    19.  
    20. // avoid error of passing event object in older browsers
    21. if (nodyn) { event = "nope" }
    22.  
    23. ///////////////////////  CUSTOMIZE HERE   ////////////////////
    24. // settings for tooltip
    25. // Do you want tip to move when mouse moves over link?
    26. var tipFollowMouse= true;    
    27. // Be sure to set tipWidth wide enough for widest image
    28. var tipWidth= 160;
    29. var offX= 20;    // how far from mouse to show tip
    30. var offY= 12;
    31. var tipFontFamily= "Verdana, arial, helvetica, sans-serif";
    32. var tipFontSize= "8pt";
    33. // set default text color and background color for tooltip here
    34. // individual tooltips can have their own (set in messages arrays)
    35. // but don't have to
    36. var tipFontColor= "#000000";
    37. var tipBgColor= "#DDECFF";
    38. var tipBorderColor= "#000080";
    39. var tipBorderWidth= 3;
    40. var tipBorderStyle= "ridge";
    41. var tipPadding= 4;
    42.  
    43. // tooltip content goes here (image, description, optional bgColor, optional textcolor)
    44. var messages = new Array();
    45. // multi-dimensional arrays containing:
    46. // image and text for tooltip
    47. // optional: bgColor and color to be sent to tooltip
    48. messages[0] = new Array('red_balloon.gif','Here is a red balloon on a white background',"#FFFFFF");
    49. messages[1] = new Array('duck2.gif','Here is a duck on a light blue background.',"#DDECFF");
    50. messages[2] = new Array('test.gif','Test description','black','white');
    51.  
    52. ////////////////////  END OF CUSTOMIZATION AREA  ///////////////////
    53.  
    54. // preload images that are to appear in tooltip
    55. // from arrays above
    56. if (document.images) {
    57.     var theImgs = new Array();
    58.     for (var i=0; i<messages.length; i++) {
    59.       theImgs[i] = new Image();
    60.         theImgs[i].src = messages[i][0];
    61.   }
    62. }
    63.  
    64. // to layout image and text, 2-row table, image centered in top cell
    65. // these go in var tip in doTooltip function
    66. // startStr goes before image, midStr goes between image and text
    67. var startStr = '<table width="' + tipWidth + '"><tr><td align="center" width="100%"><img src="';
    68. var midStr = '" border="0"></td></tr><tr><td valign="top">';
    69. var endStr = '</td></tr></table>';
    70.  
    71. ////////////////////////////////////////////////////////////
    72. //  initTip    - initialization for tooltip.
    73. //        Global variables for tooltip.
    74. //        Set styles
    75. //        Set up mousemove capture if tipFollowMouse set true.
    76. ////////////////////////////////////////////////////////////
    77. var tooltip, tipcss;
    78. function initTip() {
    79.     if (nodyn) return;
    80.     tooltip = (ie4)? document.all['tipDiv']: (ie5||ns5)? document.getElementById('tipDiv'): null;
    81.     tipcss = tooltip.style;
    82.     if (ie4||ie5||ns5) {    // ns4 would lose all this on rewrites
    83.         tipcss.width = tipWidth+"px";
    84.         tipcss.fontFamily = tipFontFamily;
    85.         tipcss.fontSize = tipFontSize;
    86.         tipcss.color = tipFontColor;
    87.         tipcss.backgroundColor = tipBgColor;
    88.         tipcss.borderColor = tipBorderColor;
    89.         tipcss.borderWidth = tipBorderWidth+"px";
    90.         tipcss.padding = tipPadding+"px";
    91.         tipcss.borderStyle = tipBorderStyle;
    92.     }
    93.     if (tooltip&&tipFollowMouse) {
    94.         document.onmousemove = trackMouse;
    95.     }
    96. }
    97.  
    98. window.onload = initTip;
    99.  
    100. /////////////////////////////////////////////////
    101. //  doTooltip function
    102. //            Assembles content for tooltip and writes
    103. //            it to tipDiv
    104. /////////////////////////////////////////////////
    105. var t1,t2;    // for setTimeouts
    106. var tipOn = false;    // check if over tooltip link
    107. function doTooltip(evt,num) {
    108.     if (!tooltip) return;
    109.     if (t1) clearTimeout(t1);    if (t2) clearTimeout(t2);
    110.     tipOn = true;
    111.     // set colors if included in messages array
    112.     if (messages[num][2])    var curBgColor = messages[num][2];
    113.     else curBgColor = tipBgColor;
    114.     if (messages[num][3])    var curFontColor = messages[num][3];
    115.     else curFontColor = tipFontColor;
    116.     if (ie4||ie5||ns5) {
    117.         var tip = startStr + messages[num][0] + midStr + '<span style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize + '; color:' + curFontColor + ';">' + messages[num][1] + '</span>' + endStr;
    118.         tipcss.backgroundColor = curBgColor;
    119.          tooltip.innerHTML = tip;
    120.     }
    121.     if (!tipFollowMouse) positionTip(evt);
    122.     else t1=setTimeout("tipcss.visibility='visible'",100);
    123. }
    124.  
    125. var mouseX, mouseY;
    126. function trackMouse(evt) {
    127.     standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
    128.     mouseX = (ns5)? evt.pageX: window.event.clientX + standardbody.scrollLeft;
    129.     mouseY = (ns5)? evt.pageY: window.event.clientY + standardbody.scrollTop;
    130.     if (tipOn) positionTip(evt);
    131. }
    132.  
    133. /////////////////////////////////////////////////////////////
    134. //  positionTip function
    135. //        If tipFollowMouse set false, so trackMouse function
    136. //        not being used, get position of mouseover event.
    137. //        Calculations use mouseover event position,
    138. //        offset amounts and tooltip width to position
    139. //        tooltip within window.
    140. /////////////////////////////////////////////////////////////
    141. function positionTip(evt) {
    142.     if (!tipFollowMouse) {
    143.         standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
    144.         mouseX = (ns5)? evt.pageX: window.event.clientX + standardbody.scrollLeft;
    145.         mouseY = (ns5)? evt.pageY: window.event.clientY + standardbody.scrollTop;
    146.     }
    147.     // tooltip width and height
    148.     var tpWd = (ie4||ie5)? tooltip.clientWidth: tooltip.offsetWidth;
    149.     var tpHt = (ie4||ie5)? tooltip.clientHeight: tooltip.offsetHeight;
    150.     // document area in view (subtract scrollbar width for ns)
    151.     var winWd = (ns5)? window.innerWidth-20+window.pageXOffset: standardbody.clientWidth+standardbody.scrollLeft;
    152.     var winHt = (ns5)? window.innerHeight-20+window.pageYOffset: standardbody.clientHeight+standardbody.scrollTop;
    153.     // check mouse position against tip and window dimensions
    154.     // and position the tooltip
    155.     if ((mouseX+offX+tpWd)>winWd)
    156.         tipcss.left = mouseX-(tpWd+offX)+"px";
    157.     else tipcss.left = mouseX+offX+"px";
    158.     if ((mouseY+offY+tpHt)>winHt)
    159.         tipcss.top = winHt-(tpHt+offY)+"px";
    160.     else tipcss.top = mouseY+offY+"px";
    161.     if (!tipFollowMouse) t1=setTimeout("tipcss.visibility='visible'",100);
    162. }
    163.  
    164. function hideTip() {
    165.     if (!tooltip) return;
    166.     t2=setTimeout("tipcss.visibility='hidden'",100);
    167.     tipOn = false;
    168. }
    169.  
    170. document.write('<div id="tipDiv" style="position:absolute; visibility:hidden; z-index:100"></div>')
    171.  
    172. </script>
     
    #3      
  4. Scheini

    Scheini Noch nicht viel geschrieben

    Dabei seit:
    27.07.2008
    Beiträge:
    20
    Geschlecht:
    männlich
    Popup menü
    AW: Popup menü

    was willst du genau bauen?,
    soll das später eventuell so aussehn das du zB nen cover von nem album hast und der dir dann interpret usw anzeigt

    mfg
    scheini
     
    #4      
  5. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Popup menü
    AW: Popup menü

    3 Datenbanken für insgesamt 3 Eilemente?
    die kann man doch besser in einer Datenbnk (vielleicht besser noch in einer Textdadatei) zusammenfassen.
    Erklär doch mal genauer, wie du die Datenbanken einbindest.
    wenn ich Datenbank höre, denke ich zunächst an MySql+php
     
    #5      
  6. ghost90

    ghost90 Noch nicht viel geschrieben

    Dabei seit:
    21.06.2008
    Beiträge:
    29
    Geschlecht:
    männlich
    Popup menü
    #6      
  7. Scheini

    Scheini Noch nicht viel geschrieben

    Dabei seit:
    27.07.2008
    Beiträge:
    20
    Geschlecht:
    männlich
    Popup menü
    AW: Popup menü

    du kannst das doch so machen:
    eigentlich brauchst du nur eine tabele, ich nen die einfach mal "autos", die tabele bekommt dann die 4 oder mehr spalten "ID" "rangliste" "bild" "baujahr" "blablup",
    dein bekannter könnte ja dann im admin menu eine art rangliste führen,
    die top 3 stehen dann auf der seite.

    mfg
    Scheini
     
    #7      
  8. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Popup menü
    AW: Popup menü

    zu den Popups:
    das ginge zB so

    Code (Text):
    1. <a href="javascript:showDetails('hierDieId')"><img="hierdasbild.jpg" /></a>
    das showDetails() könnte in etwa so aussehen:
    Code (Text):
    1.  
    2. <script>
    3.    function showDetails(ID){
    4.    var detailfenster = window.open("details.asp?artikelnummer=" + ID ,"Details","hight=,width=,scrollbars=");
    5.   detailfenster.focus();
    6.   }
    7. </script>
    8.  
    Die details.asp müsste dann ausgehend von der Artikelnummer den Datensatz aus der DB holen und (vielleicht ein grösseres Bild dazu) die Ausgabe der Daten generieren.

    ich hoffe das hilft deinen Überlegungen erst einmal weiter.
     
    Zuletzt bearbeitet: 06.08.2008
    #8      
x
×
×
teststefan