Dimensione immagine allo stato hover

[Pacio88]

Vorrei che allo stato hover venisse caricata un immagine, soltanto che questa è troppo grande e non può essere totalmente visualizzata nello sfondo del link. Come posso aumentare lo sfondo di qest'ultimo?GRAZIE..

[ricman]

Originariamente inviato da Pacio88
Vorrei che allo stato hover venisse caricata un immagine, soltanto che questa è troppo grande e non può essere totalmente visualizzata nello sfondo del link. Come posso aumentare lo sfondo di qest'ultimo?

Le foto di sfondo non sono ridimensionabili... dovresti ingrandire i tag A

[Pacio88]

Però ti spiego..il tag a è in interno a una lista. Se allargo questo mi aumenta la distanza dal link accanto..io vorre che al passaggio del mouse venisse caricata un immagine che vada a essere a sfondo anche dei link vicini. Ogni link poi dovrebbe agire allo stesso modo,però con immagini diverse..

[ricman]

Originariamente inviato da Pacio88
Però ti spiego..il tag a è in interno a una lista. Se allargo questo mi aumenta la distanza dal link accanto..io vorre che al passaggio del mouse venisse caricata un immagine che vada a essere a sfondo anche dei link vicini. Ogni link poi dovrebbe agire allo stesso modo,però con immagini diverse..

Una foto di sfondo fa da sfondo al solo oggetto che la contiene. Non è in grado di "sbordare"...
Forse ti ci vuole il js... (che non conosco bene)

Poi se qualcuno ha delle soluzioni... ormai siamo curiosi

[Mich_]

Qui occorre agire con altri sistemi ed idee. Ed e` necessario unminimo di JS (salvo non voler ricarcare la pagina ogni volta).

Per circoscrivere il problema:

<div id="spaziomenu">
  <ul>[*]primo link[*]altro link[*]... link
   ...[/list]
</div>

Occorre iniziare a dare una dimensione allo #spaziomenu. E per chiarezza anche un colore di sfondo.
Inoltre e` necessario che tutti gli oggetti interni abbiano dimensioni fisse (in px, altrimenti le immagini non si sa dove posizionarle):

#spaziomenu {
  width: 150px;
  height: 115px;          /* da settare in base al numero di elementi */
  background-color: #00f8ff;  /* azzurro chiaro */
  
}
#spaziomenu ul {
  margin: 20px 0;      /* spazio sopra e sotto 20+20px */
  padding: 0;               /* da settare sempre nelle liste */
  height: 75px;
  width: 100%;
}
#spaziomenu li {
  margin: 0 0 0 15px;    /* spazio per il list-style-type */
  padding: 0;               /* da settare sempre nelle liste */
  height: 25px;
  line-height: 25px;
  font-size: 14px;         /* in px per non aver problemi con le dimensioni */
}
#spaziomenu a {
  display: block;
  width: 100%; height: 100%;      /* occupa tutta l'area */
  color: black;
}
#spaziomenu a:hover {
  color: blue;               /* per controllare l'effetto :hover */
}

Fatto questo siamo pronti a inserire un'immagine di sfondo, che andra` inserita nel blocco #spaziomenu e posizionata in base al link su cui e` il mouse.

Quindi l'HTML diventa:

<div id="spaziomenu">
  <ul>[*]primo link[*]altro link[*]... link
   ...[/list]
</div>

Poi occorre scrivere il JS (da richiamare tramite link nella head:

var spazio = document.getElementById('spaziomenu');
var immagini = new Array('path/primaimmagine.gif', 'path/altraimmagine.gif', 'path/...immagine.gif',);
var altezzaLink = 25; 
var offsetImg = 0;

function sonosopra(n) {
  if (n<0) {
    spazio.style.backgroundImage = 'none';
  } else {
    spazio.style.backgroundImage = 'url('+immagini[n]+')';
    spazio.style.backgroundPosition = '0 '+ offsetImg+n*altezzaLink;
  }
}