Hoverbox erstellen

H

hondafreak1981

Grünschnabel
Hallo bin der Hondafreak mit forum http://www.hondayoungtimer.de


Verrückte Idee ich hoffe wir kriegen die hin.

OKI,

also auf meiner Startseite steht oben wer online ist:

http://www.imgimg.de/bild_1ec37a255JPG.jpg.html

Auf der landkarte bekommt man lustige Blasen wenn man auf einen namen klickt:

http://www.imgimg.de/bild_2a4225165JPG.jpg.html

Und diese Blase hätt ich gern als Hovereffekt direkt im Forum (schlechte Photomontage hab nur paint hier @ work ) :-)

http://www.imgimg.de/bild_3842a8a3eJPG.jpg.html


Hier mal das Landkartentemplate.
Meinste da geht was?

Code: 
{{today@dateformat.start}}Heute{{today@dateformat.end}}
    {{yesterday@dateformat.start}}Gestern{{yesterday@dateformat.end}}
    {{norm@dateformat.start}}%d.%m.%Y{{norm@dateformat.end}}


    <div class="panel">
    <div class="inner"><span class="corners-top"><span></span></span>
    <div class="content">
    <h2>{[map_title]}</h2>

    <div id="map" style="width: 100%; height: 650px"></div>
    <br>
    <img src="http://labs.google.com/ridefinder/images/mm_20_yellow.png"> {[map_location_special]}<br>
    <img src="http://labs.google.com/ridefinder/images/mm_20_red.png"> {[map_location_members]}<br>
    <small>{[map_info_mydata]}</small>

    </div>
    <span class="corners-bottom"><span></span></span></div>
    </div>



    {{endbody.start}}
    <script src="http://maps.google.com/maps?file=api&v=2&key={{api}}" type="text/javascript"></script>
    <script type="text/javascript" defer="defer">
    //<![CDATA[
    // Create our "tiny" marker icon
    var icon = new GIcon();
    icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
    icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
    icon.iconSize = new GSize(12, 20);
    icon.shadowSize = new GSize(22, 20);
    icon.iconAnchor = new GPoint(6, 20);
    icon.infoWindowAnchor = new GPoint(5, 1);

    var orticon = new GIcon();
    orticon.image = "http://labs.google.com/ridefinder/images/mm_20_yellow.png";
    orticon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
    orticon.iconSize = new GSize(12, 20);
    orticon.shadowSize = new GSize(22, 20);
    orticon.iconAnchor = new GPoint(6, 20);
    orticon.infoWindowAnchor = new GPoint(5, 1);

    var map = new GMap(document.getElementById("map"));
    map.setMapType(G_HYBRID_MAP);
    // map.addControl(new GSmallMapControl());
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
    map.centerAndZoom(new GPoint({{startX}},{{startY}}),{{startZoom}});

    function createUser(data)
    {
    var point = new GPoint(data[0], data[1]);
    var marker = new GMarker(point, icon);
    var html = "<div style='width:280px;height:120px;color:#000000'>";
    if(data[3].length>3) html += '<img src="'+data[3]+'" align=right width=65 height=75>';
    if(data[8].length>2) html += '<a href="' + data[8] + '">';
    if(data[5].length>2) html += '<span style="color:' + data[5] + '">';
    html += '<b>' + data[2] + '</b>';
    if(data[5].length>2) html += '</span>';
    if(data[8].length>2) html += '</a>';
    html += "<br>" + data[4] + "<br>";
    html += '{[map_member_messages]} ' + data[6] + '<br>{[map_member_signup_date]} ' + data[7];
    html += "</div>";
    GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(html);
    });
    return marker;
    }
    function createOrt(data)
    {
    var point = new GPoint(data[0], data[1]);
    var marker = new GMarker(point, orticon);
    var html = "<div style='width:280px;height:120px;overflow:auto;color:#000000'><b>" + data[2] + "</b><br>" + data[3];
    html += "</div>";
    GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(html);
    });
    return marker;
    }
    users = new Array(
    {{users.startlist}}{{tr}}
    new Array({{users:x}},{{users:y}},'{{users:username}}','{{users:userimage}}','{{users:usertitle}}','{{users:usercolor}}','{{users:messages}}','{{users:reged|dateformat}}','{{users:userlink}}') {{tr.start}},{{tr.end}}{{users.end}}
    );
    for (var i = 0; i < users.length; i++) {
    var marker = createUser(users[i]);
    map.addOverlay(marker);
    }
    orte = new Array(
    {{orte.startlist}}
    {{tr2}} new Array({{orte:x}},{{orte:y}},'{{orte:title}}','{{orte:text}}')
    {{tr2.start}},{{tr2.end}}
    {{orte.end}}
    );
    for (var i = 0; i < orte.length; i++) {
    var marker = createOrt(orte[i]);
    map.addOverlay(marker);
    }

    //]]>
    </script>
    {{endbody.end}}





Hier mal mein Templateelement Forum Übersicht da hab ich das mit wer online ist drin:

Code: 
<center><span style="color: #d1d1d1; font: sylfaen; font-weight: bold; font-size: 14px;">Du, <i>{{useronline.startlist}}{{komma}}<a href="{{useronline:link}}"{{useronline:name==Hondafreak1981.Admin}}>{{useronline:invisible==true.start}}<i>{{useronline:name}}</i>{{useronline:invisible==true.else}}{{useronline:name}}{{useronline:invisible==true.end}}</a>{{komma.start}}, {{komma.end}}{{useronline.end}}
    und {{guests_online}} Gäste {{guests_online==1.gast.gaeste}} sind Online und <img src="http://server3.webkicks.de/hondachat/active/red"> im Chat.</i><br> {{global_on_useronline_max==true.end}}

    </span></center>
    {{category.startlist}}
    {{tick(forums_before_cat)}}
    <div class="forabg">
    <div class="inner"><span class="corners-top"><span></span></span>
    <ul class="topiclist">
    <li class="header">
    <dl class="icon">
    <dt>{{category:title}}</dt>
    <dd class="topics">{[name_threads]}</dd>
    <dd class="posts">{[name_messages]}</dd>
    <dd class="lastpost"><span>{[index_message_last]}</span></dd>
    </dl>
    </li>
    </ul>
    <ul class="topiclist forums">
    {{tick(forums_own_row_before)}}
    {{category:forum.startlist}}

    <li class="row">
    <dl class="icon" style="background-image: url({{img_server_2}}forum_{{forum:new_messages==true.start}}un{{forum:new_messages==true.end}}read.gif); background-repeat: no-repeat;">
    <dt title="{{forum:new_messages==false.start}}{[forum_no_new_messages_style2]}{{forum:new_messages==false.else}}{[forum_new_messages_style2]}{{forum:new_messages==false.end}}">
    <a href="{{forum:link}}" class="forumtitle">{{forum:var1==true.start}}<img src="{{forum:var1}}"align= "left"border="0">{{forum:var1==true.end}}{{forum:title}}{{forum:var2==true.start}}<img src="{{forum:var2}}"align="left"border="0">{{forum:var2==true.end}}</a><br />
    {{forum:description}}
    {{forum:moderator==true.start}}<br>
    <small><b>{[name_moderator]}:</b> {{forum:moderator}}</small>{{forum:moderator==true.end}}
    {{forum:subforum==true.start}}<br><small><b>{[index_subforum]} </b>
    {{forum:subforum.startlist}}{{strenn}}<a href="{{subforum:link}}">{{subforum:title}}</a>{{strenn.start}}, {{strenn.end}}{{forum:subforum.end}}
    </small>{{strenn.start}} {{strenn.end}}{{forum:subforum==true.end}}
    </dt>
    <dd class="topics">{{forum:threads_count|numberformat}} <dfn>{[name_threads]}</dfn></dd>
    <dd class="posts">{{forum:posts_count|numberformat}} <dfn>{[name_messages]}</dfn></dd>
    {{forum:posts_count==true.start}}
    <dd class="lastpost"><span>
    <dfn>{[index_message_last]}</dfn> {[thread_of_style2]} {{user_registered==true.start}}<a href="{{forum:lastmessage_userlink}}">{{user_registered==true.end}}{{forum:lastmessage_user}}{{user_registered==true.start}}</a>{{user_registered==true.end}} <a href="{{forum:lastmessage_link}}" title="{{forum:lastmessage_title}}"><img src="{{img_server_2}}icon_topic_latest.gif" width="11" height="9" alt="{{forum:lastmessage_title}}"/></a> <br />{{forum:lastchange|dateformat}}</span>
    </dd>
    {{forum:posts_count==true.end}}
    </dl>
    </li>
    {{category:forum.end}}
    {{tick(forums_own_row_after)}}
    </ul>
    <span class="corners-bottom"><span></span></span></div>
    </div>
    {{category.end}}
    {{tick(forums_after_cat)}}


    {{mitglied.start}}{[name_member]}{{mitglied.end}}
    {{mitglieder.start}}{[name_members]}{{mitglieder.end}}
    {{ghost.start}}{[name_ghost]}{{ghost.end}}
    {{ghosts.start}}{[name_ghosts]}{{ghosts.end}}
    {{gast.start}}{[name_guest]}{{gast.end}}
    {{gaeste.start}}{[name_guests]}{{gaeste.end}}

    <div name="stats">

    {{tick(forums_bottom_right)}}


    {{user_registered==false.start}}
    {{captcha_login==false.start}}
    <form method="POST" action="login.php">
    <h3><a href="{{link_login}}">{[header_goto_login]}</a>&nbsp; &bull; &nbsp;<a href="{{link_signup}}">{[header_goto_signup]}</a></h3>
    <fieldset class="quick-login">
    <label for="username">Username:</label>&nbsp;<input name="name" type="text" value="" size="10" class="inputbox autowidth">
    <label for="password">Password:</label>&nbsp;<input name="pww" type="password" value="" size="10" class="inputbox autowidth">
    <input name="B1" type="submit" value="login" class="button2" size"3" valign="middle">
    </fieldset>
    </form>
    {{captcha_login==false.end}}
    {{user_registered==false.end}}

    <h3><a href="{{link_online}}">{[member_online_style2]}</a></h3>
    <p>{{member_online}} {{member_online==1.mitglied.mitglieder}}{{ghosts_online==true.start}}, {{ghosts_online}} {{ghosts_online==1.ghost.ghosts}} {{ghosts_online==true.end}} {[name_and]} {{guests_online}} {{guests_online==1.gast.gaeste}} {[index_user_online_are]}
    {{global_on_useronline_max==true.start}}
    {{now1@dateformat.start}}{[time_other]}{{now1@dateformat.end}}
    {{now@dateformat.start}}{[time_other]}{{now@dateformat.end}}
    {{today@dateformat.start}}{[time_other]}{{today@dateformat.end}}
    {{yesterday@dateformat.start}}{[time_other]}{{yesterday@dateformat.end}}
    {{norm@dateformat.start}}{[time_other]}{{norm@dateformat.end}}
    <br>{[index_user_online_max]}
    {{global_on_useronline_max==true.end}}<br><br>
    {[member_online_registered_style2]}{{useronline.startlist}}{{komma}}<a href="{{useronline:link}}">{{useronline:invisible==true.start}}<i>{{useronline:name}}</i>{{useronline:invisible==true.else}}{{useronline:name}}{{useronline:invisible==true.end}}</a>{{komma.start}}, {{komma.end}}{{useronline.end}}<br>

    <h3><a>{[board_stats_style2]}</a></h3>
    <p>{{boardstats.start}}{[header_home_stats]} &bull; {[index_user_lastreg]}<strong><a href="{{newest_member_link}}">{{newest_member}}</a></strong> &bull; <a href="{{link_lastmsgs}}"><span>{[header_goto_newest]}</span></a>{{boardstats.end}}
    {{forumstats.start}}<div>{[header_forum_stats]}{[header_forum_rights]}</div>{{forumstats.end}}
    {{topicstats.start}}<div>{[header_thread_stats]}<a href="{{topic_abolink}}"><span>{[thread_goto_abo]}</span></a></div>{{topicstats.end}}
    {{position==board.boardstats}}
    {{position==forum.forumstats}}
    {{position==topic.topicstats}} </p>

    </div>

Ansonsten geht auch eine normale hoverbox, also beim überstreichen des namens würde dann z.bsp das avatarbild unter dem namen angezeigt werden...

geht das?

Mffffg
 
Hallo!

Ich denke zwar dass es auch mit dieser "Spitze" hinzubekommen ist, wüsste jetzt aber nicht nach was man suchen müsste.

hondafreak1981 hat gesagt.:
Ansonsten geht auch eine normale hoverbox, also beim überstreichen des namens würde dann z.bsp das avatarbild unter dem namen angezeigt werden...

geht das?
Zum Vergrößern anklicken....
Das sollte sich mit einer "Infobox" realisieren lassen.

Gruss Dr Dau
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück