Immagine / illuminazione DIV

salve a tutti voi , scrivo questo post per potermi aiutare , non so come fare ciò , mi serve un immagine come questa , una che sia sopra di un corole più scuro dell' imagine , deve essere sfocata , e verso il centro deve mano mano diventare chiara fino a quando non sara del colore originale dell' imagine , per me era una cavolata ma non riesco a falro , se mi potete aiutare , facendomi l' immagine ?

ah , volevo anche sapere come e il codice per illuminale il div , cioè io voglio un codice che faccia in modo che quando uno ci passa sopra si illumina.

com' è quel codice ?

mi potete rispondere a entrambi le domande ?

vi ringrazio anticipatamente

Ciao, Salmon . :=): Con photoshop è facile farlo.. però non so quanto scuro . :roll: Ti va bene così ?

..Originale: http://img86.imageshack.us/img86/5161/provasp4.png
Modifica 1: http://img510.imageshack.us/img510/2...ica0001nk3.png
Modifica 3: http://img320.imageshack.us/img320/2...ica0003dj6.png
Modifica 2: http://img184.imageshack.us/img184/2...ica0002mb0.png

" volevo anche sapere come e il codice per illuminale il div , cioè io voglio un codice che faccia in modo che quando uno ci passa sopra si illumina. "

Potresti spiegare meglio la 2° domanda, esistono diversi metodi.. Al interno del "div" che cosa ci devi mettere ? Una immagine, un link o una tabella ? Si deve illuminare l'immagine o solo il bordo ? ecc..

va bene grazie, senti ma io con quel programma non lo saputo fare , comi si fa con quel programma?

*****

Citazione:

---

Originalmente inviato da consapevolezza

Ciao, Salmon . :=): Con photoshop è facile farlo.. però non so quanto scuro . :roll: Ti va bene così ?

..Originale: http://img86.imageshack.us/img86/5161/provasp4.png
Modifica 1: http://img510.imageshack.us/img510/2...ica0001nk3.png
Modifica 3: http://img320.imageshack.us/img320/2...ica0003dj6.png
Modifica 2: http://img184.imageshack.us/img184/2...ica0002mb0.png

" volevo anche sapere come e il codice per illuminale il div , cioè io voglio un codice che faccia in modo che quando uno ci passa sopra si illumina. "

Potresti spiegare meglio la 2° domanda, esistono diversi metodi.. Al interno del "div" che cosa ci devi mettere ? Una immagine, un link o una tabella ? Si deve illuminare l'immagine o solo il bordo ? ecc..

---

si deve illuminare tutto il div , hai presente i div che sono presenti nella pagina di filefox , quei link che si illuminano al passagio del mause , vorei tipo quelli

come il codice ?

[DS] Non inviare messaggi consecutivi, usa la funzione EDIT del forum...

se hai photoshop dovresti anche avere image ready per creare l'animazione del pulsante e il programma oltre a crearti l'animazione ti crea il codice html per il funzionamento del pulsante

arvezze!!!!!

si ma come si potra fare a fal illuminale il div al passagio del mause

l'unica cosa e' animare l'immagine che io sappia non ce'un tag per l'illuminazione,non so dove tu l'hai sentito,
con imageready lo puoi fare ma creando un rollover con due immagini

ciaooo!!!

Sul sito di Firefox non è che si illumina il div (che in realtà è un li), ma viene solo cambiato il colore di sfondo.
Ecco il menù:

Codice HTML:

---

<ul id="nav-main">
    <li id="menu_products"><a class="current" href="/en-US/products/">Products</a></li>
    <li id="menu_addons"><a href="https://addons.mozilla.org/">Add-ons</a></li>
    <li id="menu_support"><a href="/en-US/support/">Support</a></li>

    <li id="menu_developers"><a href="http://developer.mozilla.org/">Developers</a></li>
    <li id="menu_aboutus"><a href="/en-US/about/">About</a></li>

</ul>

---

Ecco qui il codice CSS:

Codice:

---

/* header */

#header {
        height: 38px;
        position: relative;
        border-bottom: 1px solid #A1A6B1;
        background: #33415D url("/img/template/header-background.png") top repeat-x;
        z-index: 1;
}

#header h1 { margin: 0;        }

#header h1 img {
        font-weight: bold;
        color: #7f7c45;
}

#header ul {
        padding: 0;
        margin: 0;
        list-style: none;
        border-left: 1px solid #576178;
        border-right: 1px solid #1f2635;
        position: absolute;
        top: 0;
}

#header li {
        float: left;
        padding: 0;
        margin: 0;
}

#header ul span, #header ul a:link, #header ul a:visited {
        display: block;
        float: left;
        padding: 10px 15px;
        text-decoration: none;
        border-right: 1px solid #576178;
        border-left: 1px solid #1f2635;
        color: #dee0e5;
        height: 36px;
        voice-family: "\"}\"";
        voice-family: inherit;
        height: 16px;
} #ignored {}

#header ul li span,
#header ul li a.current,
#header ul li a:hover {
        background: #475470;
        color: #fff;
        text-decoration: underline;
}

#header ul li span,
#header ul li a.current {
        text-decoration: none;
}

---

praticamente il tag che hai messo lavora sullo sfondo di tutta la pagina ho solo quello relativo alla posizione dell'immagine?

Citazione:

---

Originalmente inviato da Bluroy

praticamente il tag che hai messo lavora sullo sfondo di tutta la pagina ho solo quello relativo alla posizione dell'immagine?

---

Se stai chiedendo a me, le immagini non c'entrano nulla. E' solo il codice utilizzato per il menù alto di questa pagina.

ah ok ora ho capito garzie!!!

Citazione:

---

Originalmente inviato da Salmon

si ma come si potra fare a fal illuminale il div al passagio del mause

---

Se intendi illuminare solo testo , ti propongo 4 soluzioni (molto semplici) che puoi ottenere con i " CSS " :

Esempio 1 Esempio 2 Esempio 3 Esempio 4 Il codice per l'esempio 1 è il seguente. Parametri in grassetto sono da cambiare come desideri (URL , testo , target , tipo di font , dimensione font , background-image) mentre da quelli in blu dipede "l' illuminazione " del testo - in questo caso io ho scelto il colore nero e il colore bianco , tu puoi mettere altre combinazioni di colori . Il parametro "TEXT-DECORATION" serve per scegliere se sottolineare il testo (link\ visited\ hover) o meno. Il funzionamento di questo CSS si basa sul tag class="d" , dove "d" è un nome a caso .. Nell' esempio 3 , è possibile creare colori differenti per ogni link - poiché cambia class=" " da applicare ad ogni link separatamente . Se invece volevi illuminare le immagini , dopo posterò altre spiegazioni ( non ho ben capito il discorso sui "d i v" ) . . :roll:

Codice:

---

<STYLE><!--

        BODY { CURSOR: default;

        FONT-FAMILY: Arial;

        BACKGROUND-COLOR: #aaaaaa;

        FONT-SIZE: 18pt; COLOR: black;

        SCROLLBAR-ARROW-COLOR: #ffffff;

        SCROLLBAR-TRACK-COLOR: #ffffff;

        SCROLLBAR-BASE-COLOR: #dddddd; }


        a.d:link    {COLOR: #000000; TEXT-DECORATION: underline}

        a.d:visited {COLOR: #000000; TEXT-DECORATION: underline}

        a.d:hover  {COLOR: #ffffff; TEXT-DECORATION: none}


//--></STYLE>

</HEAD><BODY background="IMAGE" SCROLL="auto">

<a class="d" href="URL" target="_top"><b>TESTO</b></a>

---

Citazione:

---

Originalmente inviato da Salmon

si ma come si potra fare a fal illuminale il div al passagio del mause

---

Ecco uno script che ti potrebbe servire:

<script type="text/javascript" language="javascript">
function high(which2){
theobject=which2
highlighting=setInterval("highlightit(theobject)", 30)
}
function low(which2){
clearInterval(highlighting)
if (which2.style.MozOpacity)
which2.style.MozOpacity=0.3
else if (which2.filters)
which2.filters.alpha.opacity=50
}

function highlightit(cur2){
if (cur2.style.MozOpacity<1)
cur2.style.MozOpacity=parseFloat(cur2.style.MozOpa city)+0.1
else if (cur2.filters&&cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (window.highlighting)
clearInterval(highlighting)
}
</script>

Quando poi inserisci l'immagine metti:

<P style="MARGIN-TOP: 0px; MARGIN-BOTTOM: 0px" align=center>
<IMG style="filter:alpha(opacity=50);-moz-opacity:0.5;" onMouseover="high(this)" onMouseout="low(this)" src="indirizzo" width="??" border=? img heigth="?" alt="??">


Spero di essere stato chiaro e utile...

Citazione:

---

Originalmente inviato da consapevolezza

Se intendi illuminare solo testo , ti propongo 4 soluzioni (molto semplici) che puoi ottenere con i " CSS " :

Esempio 1 Esempio 2 Esempio 3 Esempio 4 Il codice per l'esempio 1 è il seguente. Parametri in grassetto sono da cambiare come desideri (URL , testo , target , tipo di font , dimensione font , background-image) mentre da quelli in blu dipede "l' illuminazione " del testo - in questo caso io ho scelto il colore nero e il colore bianco , tu puoi mettere altre combinazioni di colori . Il parametro "TEXT-DECORATION" serve per scegliere se sottolineare il testo (link\ visited\ hover) o meno. Il funzionamento di questo CSS si basa sul tag class="d" , dove "d" è un nome a caso .. Nell' esempio 3 , è possibile creare colori differenti per ogni link - poiché cambia class=" " da applicare ad ogni link separatamente . Se invece volevi illuminare le immagini , dopo posterò altre spiegazioni ( non ho ben capito il discorso sui "d i v" ) . . :roll:

Codice:

---

<STYLE><!--

        BODY { CURSOR: default;

        FONT-FAMILY: Arial;

        BACKGROUND-COLOR: #aaaaaa;

        FONT-SIZE: 18pt; COLOR: black;

        SCROLLBAR-ARROW-COLOR: #ffffff;

        SCROLLBAR-TRACK-COLOR: #ffffff;

        SCROLLBAR-BASE-COLOR: #dddddd; }


        a.d:link    {COLOR: #000000; TEXT-DECORATION: underline}

        a.d:visited {COLOR: #000000; TEXT-DECORATION: underline}

        a.d:hover  {COLOR: #ffffff; TEXT-DECORATION: none}


//--></STYLE>

</HEAD><BODY background="IMAGE" SCROLL="auto">

<a class="d" href="URL" target="_top"><b>TESTO</b></a>

---

---

interessante quindi io ogni link testuale posso cambiare il colore di base giusto oppure no?

Esatto , per ogni link testuale puoi avere il colore ( oppure altre caratteristiche CSS ) "link" , "visited" e "hover" separato e differente dagli altri . .Basta aggiungere class=" " per ogni tag "a href" , e poi scrivere la parte del CSS relativa nel header .

Un altro codice con il quale si può ottenere lo stesso effetto ( Esempio 5 + Esempio 6 ) è il seguente . Qui puoi cambiare onmouseover e onmouseout direttamente all'interno del tag "a href" senza dover scrivere CSS :

Codice:

---

                          <a
      onmouseover="this.style.color='#dd7733'"
      onmouseout="this.style.color='#000000'"
      href="URL1">TESTO1</a> <a
      onmouseover="this.style.color='#00ccaa'"
      onmouseout="this.style.color='#000000'"
      href="URL2">TESTO2</a> <a
      onmouseover="this.style.color='#0088ee'"
      onmouseout="this.style.color='#000000'"
      href="URL3">TESTO3</a> ecc..

---

grazie per gli esempi e' interessante cio' che si puo fare con i css

ok, grazie a tutti voi