Jump to content

Recommended Posts

Posted

Salut PCT.

Adresez această întrebare în general ceror cu mari experiente HTML & CSS.

Există vreo posibilitate la meniu , cand treci cu mouse-ul peste "Forums" spre exemplu (hover) in dreptul logo-ului sa apara un preview , iar la membrii cu membrii si tot asa ?

daina mucles daina deles

 

Posted

Salut PCT.

Adresez această întrebare în general ceror cu mari experiente HTML & CSS.

Există vreo posibilitate la meniu , cand treci cu mouse-ul peste "Forums" spre exemplu (hover) in dreptul logo-ului sa apara un preview , iar la membrii cu membrii si tot asa ?

 

Te credeai mare coder, faceai teme IPB... ehh.

 

Da, exista. Cu cateva clase poti rezolva asta.

  • Downvote 1
  • Moderators
Posted

Da, exista. Cu cateva clase poti rezolva asta.

Daca este vorba sa se vada pagina "live", nu prea poti, pentru ca CSS-ul nu stie sa incarce un URL. Daca e sa se incarce o imagine, atunci da, e posibil doar cu CSS.

 

Pentru ceva "live" vezi urmatoarele exemple:

http://www.ampedupdesigns.com/blog/show?bid=49( Plugin jQuery gata facut )

http://psoug.org/snippet/Preview_URLPage_On_Hover_216.htm( Exemplu mai simplu )

 

Ambele trebuie incorporate in IPB.

  • Upvote 1

PHP Developer - Not available for freelancing right now

Daca ai de gand sa postezi la categoria IPB, nu uita sa citesti regulamentul: Link regulament

  • Moderators
Posted
  • Upvote 1

PHP Developer - Not available for freelancing right now

Daca ai de gand sa postezi la categoria IPB, nu uita sa citesti regulamentul: Link regulament

Posted

screenshot_73.png

Am folosit metoda :

https://linkpeek.com/blog/display-image-on-hover-using-html-javascript-and-css.html

 

Totul ok , insa dupa ce iau mouseul după buton , ramane blocata imaginea , si cum pot face sa apara in logul destinat logo-ului ?

 

HTML butoane

<!-- ::: APPLICATION TABS ::: -->
        <div>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<ul class="ecila-menu">
<li>
  onmouseout="document.getElementById('place-holder-1').src='http://i.imgur.com/jxRYNDB.png">
<i class="fa fa-home"></i>
 <img src="http://i.imgur.com/jxRYNDB.png"id="place-holder-1" style="zindex: 100; position: absolute;" />
                </a>
            </li>
            
            <li>
  onmouseout="document.getElementById('place-holder-1').src='http://i.imgur.com/jxRYNDB.png">
<i class="fa fa-users"></i>
<img src="http://i.imgur.com/jxRYNDB.png"id="place-holder-1" style="zindex: 100; position: absolute;" />
                </a>
            </li>
<li>
  onmouseout="document.getElementById('place-holder-1').src='http://i.imgur.com/jxRYNDB.png">
<i class="fa fa-comments-o"></i>
<img src="http://i.imgur.com/jxRYNDB.png"id="place-holder-1" style="zindex: 100; position: absolute;" />
                </a>
            </li>
<li>
  onmouseout="document.getElementById('place-holder-1').src='http://i.imgur.com/jxRYNDB.png">
<i class="fa fa-bullhorn"></i>
<img src="http://i.imgur.com/jxRYNDB.png"id="place-holder-1" style="zindex: 100; position: absolute;" />
                </a>
            </li>
            
        </ul>
</div>
 
            
 
            </div>
<div class='content'>
    
<div id='secondary_navigation' class='clearfix'>
 
<ol class='breadcrumb top ipsList_inline left' id='breadcrumb'>
<php>$this->did_first = 0;</php>
<if test="switchnavigation:|:!$this->settings['remove_forums_nav'] OR ipsRegistry::$current_application == 'forums'">
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"<if test="!$this->did_first">class='first'</if>>
<a href='{parse url="act=idx" seotitle="false" base="public"}' itemprop="url">
<span itemprop="title">{$this->settings['board_name']}</span>
</a>
</li>
<if test="didfirstnav:|:$this->did_first=1"></if>
</if>
<foreach loop="navigation:$items['navigation'] as $idx => $data">
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"<if test="!$this->did_first">class='first'</if>>
<if test="navigationlink:|:$data[1]"><a href='{parse url="{$data[1]}" base="$data[4]" seotitle="$data[2]" template="$data[3]"}' title='{$this->lang->words['nav_return_to']} {parse expression="IPSText::striptags( IPSText::htmlspecialchars( $data[0] ) )"}' itemprop="url"></if><span itemprop="title">{$data[0]}</span><if test="closenavigationlink:|:$data[1]"></a></if>
</li>
<if test="forsuredidfirstnav:|:$this->did_first=1"></if>
</foreach>
</ol>
 
<ul id='secondary_links' class='ipsList_inline right'>
<if test="siteruleslink:|:$this->settings['gl_show'] and $this->settings['gl_title']"><li><a href='<if test="ruleslink:|:$this->settings['gl_link']">{$this->settings['gl_link']}<else />{parse url="app=forums&amp;module=extras&amp;section=boardrules" base="public"}</if>'><if test="siterulestitle:|:$this->settings['gl_title']">{$this->settings['gl_title']}<else />{$this->lang->words['board_rules']}</if></a></li></if>
<li><a href='{parse url="app=core&amp;module=search&amp;do=viewNewContent&amp;search_app=<if test="viewnewcontentapp:|:$this->registry->getCurrentApplication() != 'core' AND IPSLib::appIsSearchable( $this->registry->getCurrentApplication() )">{$this->registry->getCurrentApplication()}<else />forums</if>" base="public"}' accesskey='2'>{$this->lang->words['view_new_posts']}</a></li>
<if test="showQuickNav:|:! ( ! $this->memberData['member_id'] && $this->settings['force_login'] ) && !($this->settings['board_offline'] && !$this->memberData['g_access_offline']) && $this->memberData['g_view_board']">
<li><a href="{parse url="app=core&amp;module=global&amp;section=navigation&amp;inapp={parse expression="IPS_APP_COMPONENT"}" base="public"}" rel="quickNavigation" accesskey='9' id='quickNavLaunch' title="{$this->lang->words['launch_quicknav']}"><img src="{style_images_url}/icon_quicknav.png" alt="" /></a></li>
</if>
<if test="$this->settings['showFacebook']=='yes'">
<li><a href="http://www.facebook.com/{$this->settings['facebookName']}"title="Visit us on Facebook"><img src="{style_images_url}/social_facebook.png" alt="" /></a></li>
</if>
<if test="$this->settings['showTwitter']=='yes'">
<li><a href="http://twitter.com/#!/{$this->settings['twitterName']}"title="Follow us on Twitter"><img src="{style_images_url}/social_twitter.png" alt="" /></a></li>
</if>
<if test="$this->settings['showYoutube']=='yes'">
<li><a href="http://www.youtube.com/user/{$this->settings['youtubeName']}"title="Watch us on YouTube"><img src="{style_images_url}/social_youtube.png" alt="" /></a></li>
</if>
</ul>
 
</div>

daina mucles daina deles

 

  • Moderators
Posted

Ramane blocat pentru ca ai folosit aceasi ID la toate butoanele :)

 

Aici:

<a href="https://linkpeek.com">
  website screenshot service
  <img src="/theme/img/linkpeek-transparent-pixel-placeholder.png" id="place-holder-1" style="zindex: 100; position: absolute;" />
</a>

Unde pune:

id="place-holder-1"

Schimba numaru cu urmatoru, adica 2,3,4,etc le fiecare link/buton. Si la:

onmouseover="document.getElementById('place-holder-1').src='https://linkpeek.com/api/v1?uri=http%3A//linkpeek.com&apikey=9fhvyH9KP&token=ada234417193f502523a7d1da2ef1501&size=336x336';"

In bucata de:

('place-holder-1')

Schimba si acolo numaru cu numaru de la fiecare link/meniu.

La:

onmouseout="document.getElementById('place-holder-1').src='/theme/img/linkpeek-transparent-pixel-placeholder.png';"

La fel, unde este place-holder-1, schimbi.

 

Toate astea, daca folosesti 5 imagini in 5 linkuri, va trebui sa dai copy/paste la bucatiile:

onmouseover="document.getElementById('place-holder-1').src='https://linkpeek.com/api/v1?uri=http%3A//linkpeek.com&apikey=9fhvyH9KP&token=ada234417193f502523a7d1da2ef1501&size=336x336';"
onmouseout="document.getElementById('place-holder-1').src='/theme/img/linkpeek-transparent-pixel-placeholder.png';"

De 5 ori fiecare cu un numar diferit. Asta-i metoda simpla si mai directa pentru a avea pentru mai multe linkuri/butoane.

Alta metoda ar fii sa creezi toate alea cu un FOR in JS care sa creasca numaru acela si sa-l afiseze in locu lui.

PHP Developer - Not available for freelancing right now

Daca ai de gand sa postezi la categoria IPB, nu uita sa citesti regulamentul: Link regulament

  • Moderators
Posted

Pentru ca in codu tau lipseste partea de Onmouseover la fiecare link.

PHP Developer - Not available for freelancing right now

Daca ai de gand sa postezi la categoria IPB, nu uita sa citesti regulamentul: Link regulament

  • Moderators
Posted

Imaginea de la:

onmouseout

Ce este in cazu tau?

PHP Developer - Not available for freelancing right now

Daca ai de gand sa postezi la categoria IPB, nu uita sa citesti regulamentul: Link regulament

Posted

Imaginea de la onmouseout aparea dupa iconita font awsome ca si cum nu ar fi fost pe host , fara sa trec cu mouse-ul peste buton,aparea dupa , asa ca , am facut in photoshop o imagine transparente 1x1 , si apare acolo , este http://i.imgur.com/jxRYNDB.png.

daina mucles daina deles

 

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.