Efect Hover Header

[+duL @]

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 ?

[+SnowHD]

Fi mai explicit, nu inteleg unde vrei hover, si ce tip de hover

[+Kames]

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.

[gadeas]

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.

[+duL @]

Nu vreau să se vadă live, să se vadă o imagine selectată de mine.

[gadeas]

Vezi aici:

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

http://cssdemos.tupence.co.uk/image-popup.htm

http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/

[+duL @]

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>

                <a href="http://aimers.ro"onmouseover="document.getElementById(place-holder-1').src='http://i.imgur.com/2l9Aa0x.png';"

  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>

                <a href="http://aimers.ro/index.php?/members/"onmouseover="document.getElementById(place-holder-1').src='http://i.imgur.com/okmiCEf.png';"

  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>

                <a href="http://aimers.ro/index.php?/shoutbox/"onmouseover="document.getElementById(place-holder-1').src='http://i.imgur.com/2l9Aa0x.png';"

  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>

                <a href="http://aimers.ro/index.php?/forum-2/announcement-2-regulamentul-comunit%C4%83%C5%A3ii-aimers/"onmouseover="document.getElementById(place-holder-1').src='http://i.imgur.com/okmiCEf.png';"

  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>

[+duL @]

bump

[+duL @]

BUMP.

[+duL @]

Gadeas raspunzi sau fac topic separat?

[gadeas]

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.

[+duL @]

Am schimbat la toate , acum raman blocate toate .

[gadeas]

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

[+duL @]

o am . doar ca in spoilerul meu s-au pus cu "..."

http://s2.postimg.org/c899ka9hl/screenshot_77.png

[gadeas]

Imaginea de la:

onmouseout

Ce este in cazu tau?

[+duL @]

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.

[+duL @]

UP.

[+duL @]

up.