Archivio 'Temi e Grafica' :: [RISOLTO] Immagine Di Background In Rollover

Pagina 1 di 1

[RISOLTO] Immagine Di Background In Rollover

#1 HaoAsakura Venerdì, 17 Aprile 2009, 22:32

Ed eccomi ancora qua ^^

Ho cercato un po in rete ma devo ammettere di non aver capito una mazza delle indicazioni trovate ^^

Una cosa però l'ho capita ... per fare il rollover di un'img di background bisogna lavorare con il CSS e non con script vari in modo da non appesantire il tutto ...

Bene ... non so da dove cominciare!

Vediamo di mettere insieme tutto l'occorrente per aiutarvi a mettermi sulla buona strada!

La mia intenzione è creare un nuovo menu alternativo da posizionare alla sinistra del blocco principale della homepage (portale a 2 colonne!)

Questa è l'immagine del menu:

Questo invece è il codice html del menu:

Spoiler: [ Mostra ]

Codice: [Download] [Nascondi] [Seleziona]

<br />

<table width="190" border="0" cellspacing="0" cellpadding="0">

  <tr>

    <td colspan="2" width="190" height="50" background="http://www.growth.netsons.org/webmaster/ip/ML_NV/f_mainmenu.png">&nbsp;</td>

  </tr>

  <tr>

    <td colspan="2" width="190" height="15" background="http://www.growth.netsons.org/webmaster/ip/ML_NV/line.png"><a href="http://www.souleateritalia.it" style="text-decoration:none">Portale</a></td>

  </tr>

  <tr>

    <td colspan="2" width="190" height="15" background="http://www.growth.netsons.org/webmaster/ip/ML_NV/line.png"><a href="http://www.souleateritalia.it/forum.php" style="text-decoration:none">Forum</a></td>

  </tr>

  <tr>

    <td colspan="2" width="190" height="15" background="http://www.growth.netsons.org/webmaster/ip/ML_NV/line.png"><a href="http://www.souleateritalia.it/album.php" style="text-decoration:none">Galleria</a></td>

  </tr>

  <tr>

    <td colspan="2" width="190" height="15" background="http://www.growth.netsons.org/webmaster/ip/ML_NV/line.png"><a href="http://www.souleateritalia.it/contact_us.php" style="text-decoration:none">Contattaci</a></td>

  </tr>

  <tr>

    <td colspan="2" width="190" height="15" background="http://www.growth.netsons.org/webmaster/ip/ML_NV/line.png"><a href="http://www.souleateritalia.it/profile.php?mode=register" style="text-decoration:none">Registrati</a></td>

  </tr>

  <tr>

    <td colspan="2" width="190" height="15" background="http://www.growth.netsons.org/webmaster/ip/ML_NV/line.png"><a href="http://www.souleateritalia.it/viewtopic.php?f=18&t=80" style="text-decoration:none">Be allies</a></td>

  </tr>

  <tr>

    <td colspan="2" width="190" height="15" background="http://www.growth.netsons.org/webmaster/ip/ML_NV/line.png"><a href="http://www.souleateritalia.it/index.php?page=20" style="text-decoration:none">Disclaimer &amp; Copyright©</a></td>

  </tr>

  <tr>

    <td colspan="2"width="190" height="15" /></td>

  </tr>

</table>

Mi piacerebbe che succeda questo quando seleziono uno voce ...

Che la freccia bianca

Codice: [Download] [Nascondi] [Seleziona]

http://www.growth.netsons.org/webmaster/ip/ML_NV/line.png

Venga sostituita con questa arancione

Codice: [Download] [Nascondi] [Seleziona]

http://www.growth.netsons.org/webmaster/ip/ML_NV/on_line.png

Ovviamente lasciando entrambe le immagini in background ^^

Grazie, come sempre, della disponibilità!

La seconda domanda ... dopo aver risolto il primo problema!

Versione di IP: 1.3.0.53a
Server: Linux
____________

Icy Phoenix "HaoAsakura Style Template"
www.souleateritalia.it | www.fmaitalia.net | www.bakanashumi.it

Ultima modifica di HaoAsakura il Sabato, 18 Aprile 2009, 12:22, modificato 1 volta in totale

HaoAsakura

Appassionato

Età: 30

Registrato: Giugno 2008

Messaggi: 512

Re: Immagine Di Background In Rollover

#2 Limun Sabato, 18 Aprile 2009, 11:52

crea un nouvo php blocko nel tou root in blocks

blocks_imp_freccia.php
e metti cosi dentro

Spoiler: [ Mostra ]

addeso nell templates\default\blocks\ creaa "freccia_block.tpl" e metti cosi dentro

Spoiler: [ Mostra ]

poi apri il tuo stilo style.css
scroli fino a fondo e aggiungi questo

Spoiler: [ Mostra ]

poi vai nel CMS e aggiungi blocko "freccia" e metilo dove voi

demo --> http://art.creativeproject.com/beta/forum.php

Versione di IP: 1.2.0.27x
Server: Linux

Ultima modifica di Limun il Sabato, 18 Aprile 2009, 11:54, modificato 1 volta in totale

Limun

Visitatore

Età: 43

Registrato: Dicembre 2008

Residenza: Opatija

Messaggi: 66

Re: Immagine Di Background In Rollover

#3 HaoAsakura Sabato, 18 Aprile 2009, 11:55

Come al solito gentilissimo!

La creazione del blocco (il topic che avevo aperto) mi sono accorto poi che c'era una guida dettagliata per crearlo e ci sono riuscito

Grazie per la dritta per le immagini ... sei un mito!

Limun, #1

Versione di IP: 1.3.0.53a
Server: Linux
____________

Icy Phoenix "HaoAsakura Style Template"
www.souleateritalia.it | www.fmaitalia.net | www.bakanashumi.it

HaoAsakura

Appassionato

Età: 30

Registrato: Giugno 2008

Messaggi: 512

Re: [RISOLTO] Immagine Di Background In Rollover

#4 FedericoBiccheddu Domenica, 19 Aprile 2009, 17:24

Io migliorerei il codice di Limun in questo modo:

Crei un nuovo file .cfg con questo contenuto:

Codice: [Download] [Nascondi] [Seleziona]

<?php

if (!defined('IN_ICYPHOENIX'))

{

    die('Hacking attempt');

}

// array(<Field label>, <Field Info>, <Config Name>, <Options>, <Field Values>, <Control Type>, <Block>, <Default Value>);

$block_variables = array(

    array('Menu block ID', 'Enter the ID of the menu block, type 0 for default', 'md_menu_id', '', '', '1', 'global_header_tabs', '1'),

);

$block_count_variables = count($block_variables);

?>

Poi ne crei uno .php, con lo stesso nome, con questo codice al suo interno:

Spoiler: [ Mostra ]

Codice: [Download] [Nascondi] [Seleziona]

<?php

/**

*

* @package Icy Phoenix

* @version $Id: blocks_imp_global_header_simple.php 61 2008-10-30 09:25:26Z Mighty Gorgon $

* @copyright (c) 2008 Icy Phoenix

* @license http://opensource.org/licenses/gpl-license.php GNU Public License

*

*/

/**

*

* @Extra credits for this file

* masterdavid - Ronald John David

*

*/

if (!defined('IN_ICYPHOENIX'))

{

    die('Hacking attempt');

}

if(!function_exists('imp_NOME_FILE_MINUSCOLO_block_func'))

{

    function imp_NOME_FILE_MINUSCOLO_block_func()

    {

        global $template, $cms_config_vars, $block_id, $table_prefix, $db, $lang, $board_config, $theme, $images, $userdata;

        include_once(IP_ROOT_PATH . 'includes/functions_cms_menu.' . PHP_EXT);

        $template->_tpldata['header_row.'] = array();

        include_once(IP_ROOT_PATH . 'language/lang_' . $board_config['default_lang'] . '/lang_dyn_menu.' . PHP_EXT);

        $sql = "SELECT * FROM " . CMS_NAV_MENU_TABLE . "

                        WHERE menu_id = '" . intval($cms_config_vars['md_menu_id'][$block_id]) . "'

                            LIMIT 1";

        if (!($result = $db->sql_query($sql, false, 'dyn_menu_')))

        {

            message_die(GENERAL_ERROR, 'Could not query dynamic menu table');

        }

        //$row = $db->sql_fetchrow($result);

        while ($row = $db->sql_fetchrow($result))

        {

            break;

        }

        if (($row['menu_name_lang'] != '') && isset($lang[$row['menu_name_lang']]))

        {

            $main_menu_name = $lang[$row['menu_name_lang']];

        }

        else

        {

            $main_menu_name = (($row['menu_name'] != '') ? $row['menu_name'] : $lang['quick_links']);

        }

        $sql = "SELECT * FROM " . CMS_NAV_MENU_TABLE . "

                        WHERE menu_parent_id = '" . intval($cms_config_vars['md_menu_id'][$block_id]) . "'

                        ORDER BY cat_parent_id ASC, menu_order ASC";

        if (!($result = $db->sql_query($sql, false, 'dyn_menu_')))

        {

            message_die(GENERAL_ERROR, 'Could not query dynamic menu table');

        }

        $menu_cat = array();

        $cat_item = array();

        $menu_item = array();

        $print_cat= array();

        $first_item = 0;

        while ($menu_item = $db->sql_fetchrow($result))

        {

            if ($menu_item['cat_id'] > 0)

            {

                $cat_item[$menu_item['cat_id']] = $menu_item;

            }

            if ($menu_item['cat_parent_id'] > 0)

            {

                $menu_cat[$menu_item['cat_parent_id']][$menu_item['menu_item_id']] = $menu_item;

            }

        }

        foreach($cat_item as $cat_item_data)

        {

            if ($cat_item_data['menu_status'] == false)

            {

                $cat_allowed = false;

            }

            else

            {

                $cat_allowed = true;

                $auth_level_req = $cat_item_data['auth_view'];

                switch($auth_level_req)

                {

                    case '0':

                        $cat_allowed = true;

                        break;

                    case '1':

                        $cat_allowed = ($userdata['session_logged_in'] ? false : true);

                        break;

                    case '2':

                        $cat_allowed = ($userdata['session_logged_in'] ? true : false);

                        break;

                    case '3':

                        $cat_allowed = ((($userdata['user_level'] == MOD) || ($userdata['user_level'] == ADMIN)) ? true : false);

                        break;

                    case '4':

                        $cat_allowed = (($userdata['user_level'] == ADMIN) ? true : false);

                        break;

                    default:

                        $cat_allowed = true;

                        break;

                }

                $cat_id = ($cat_item_data['cat_id']);

                foreach($menu_cat[$cat_id] as $menu_cat_item_data)

                {

                    if ($menu_cat_item_data['menu_status'] == false)

                    {

                        $menu_allowed = false;

                    }

                    else

                    {

                        $menu_allowed = true;

                        $auth_level_req = $menu_cat_item_data['auth_view'];

                        switch($auth_level_req)

                        {

                            case '0':

                                $menu_allowed = true;

                                break;

                            case '1':

                                $menu_allowed = ($userdata['session_logged_in'] ? false : true);

                                break;

                            case '2':

                                $menu_allowed = ($userdata['session_logged_in'] ? true : false);

                                break;

                            case '3':

                                $menu_allowed = ((($userdata['user_level'] == MOD) || ($userdata['user_level'] == ADMIN)) ? true : false);

                                break;

                            case '4':

                                $menu_allowed = (($userdata['user_level'] == ADMIN) ? true : false);

                                break;

                            default:

                                $menu_allowed = true;

                                break;

                        }

                    }

                    if ($menu_allowed == true)

                    {

                        //echo($menu_cat_item_data['menu_name'] . '<br />');

                        if ($first_item == 0)

                        {

                            $menu_sep = '';

                            $first_item++;

                        }

                        else

                        {

                            $menu_sep = ($cms_config_vars['md_show_sep_icon'][$block_id] == true) ? '<img src="' . $images['nav_menu_sep'] . '" alt="" />' : '';

                        }

                        if ($cms_config_vars['md_show_links_icon'][$block_id] == true)

                        {

                            $menu_icon = (($menu_cat_item_data['menu_icon'] != '') ? '<img src="' . $menu_cat_item_data['menu_icon'] . '" alt="" />&nbsp;' : '<img src="' . $images['nav_menu_sep'] . '" alt="" />&nbsp;');

                        }

                        if ($menu_cat_item_data['menu_default'] == 0)

                        {

                            if (($menu_cat_item_data['menu_name_lang'] != '') && isset($lang['menu_item'][$menu_cat_item_data['menu_name_lang']]))

                            {

                                $menu_name = $lang['menu_item'][$menu_cat_item_data['menu_name_lang']];

                            }

                            else

                            {

                                $menu_name = (($menu_cat_item_data['menu_name'] != '') ? stripslashes($menu_cat_item_data['menu_name']) : 'cat_item' . $menu_cat_item_data['cat_id']);

                            }

                            if ($menu_cat_item_data['menu_link_external'] == true)

                            {

                                $menu_link = $menu_cat_item_data['menu_link'];

                                $menu_link .= '" target="_blank';

                            }

                            else

                            {

                                $menu_link = append_sid($menu_cat_item_data['menu_link']);

                            }

                            $menu_url = '<a href="' . $menu_link . '">' . $menu_name . '</a>';

                        }

                        else

                        {

                            if (($menu_cat_item_data['menu_name_lang'] != '') && isset($lang['menu_item'][$menu_cat_item_data['menu_name_lang']]))

                            {

                                $menu_name = $lang['menu_item'][$menu_cat_item_data['menu_name_lang']];

                            }

                            else

                            {

                                $menu_name = (($menu_cat_item_data['menu_name'] != '') ? stripslashes($menu_cat_item_data['menu_name']) : 'cat_item' . $menu_cat_item_data['cat_id']);

                            }

                        }

                        $menu_link = append_sid($menu_cat_item_data['menu_link']);

                        $menu_url = '<a href="' . $menu_link  . '">' . $menu_name . '</a>' ;

                        #$menu_url = build_complete_url($menu_cat_item_data['menu_default'], $block_id, $menu_cat_item_data['menu_link'], $menu_icon);

                        $template->assign_block_vars('link', array(

                            'MENU_SEP' => $menu_sep,

                            'MENU_NAME' => $menu_name,

                            'MENU_LINK' => $menu_link,

                            'MENU_URL' => $menu_url,

                            'MENU_DESC' => $menu_desc,

                        ));

                    }

                }

            }

        }

    }

}

imp_NOME_FILE_MINUSCOLO_block_func();

?>

Dove cambierai questo: NOME_FILE_MINUSCOLO con il nome del file .cfg e .php (che devono essere uguali) per esempio con: menu_lateral_rollover. Avrai quindi la funzione così: imp_menu_lateral_rollover_block_func() e questi 2 file:

blocks_imp_menu_lateral_rollover.cfg
blocks_imp_menu_lateral_rollover.php

Nel .tplscrivi così:

Codice: [Download] [Nascondi] [Seleziona]

<ul>

<!-- BEGIN link --> 

<li><a href="{link.MENU_LINK}" class="freccia">{link.MENU_LINK}</a></li>

<!-- END link -->

</ul>

mentre nel .css:

Codice: [Download] [Nascondi] [Seleziona]

a.freccia {

    display: block;

    text-align: center;

    line-height: 15px;

    background: url(LINK_IMMAGINE_POSTATA_DA_ME) no-repeat bottom;

    background-position: 0 18px;

    height: 20px;

  }

a.freccia:hover{

    background-position: 0 -11px;

  }

Così utilizzi una immagine (vero roll-over), carica prima, e basta che modifichi un valore quando cambi sfondo

Ho messo l'immagine in una cella a sfondo nero per vedersi, salvalo e caricala, poi cambia il link nel css

In questo modo, potrai gestire i tuoi link dalla Gestione CMS, creando un nuovo menu dinamico ed inserendo l'ID del blocco quando ne crei uno con il blocco che ti ho appena postato

PS: Dovrebbe funzionare, ho fatto tutto qui mentre postavo, non l'ho provato (escluso il codice CSS), se hai errori dimmelo.

Versione di IP: 1.3.15 (αlphα)
Server: Linux
____________

Per favore inserisci nel tuo Profilo la versione di Icy Phoenix e il Server utilizzato.

FedericoBiccheddu