1 reply [Last post]
IgnacioG
Offline
newbie
Last seen: 11 years 8 weeks ago
Timezone: GMT-3
Joined: 2010-07-29
Posts: 1
Points: 2

HI I have the following..(in a row)

[<img src="home.jpg" alt="home" name="home" id="home" onmouseover="HomeAct(this)" onmouseout="Home(this)"/>
 
<img src="services.jpg" alt="servicio" name="servicios" id="servicios" onmouseover="ServicioAct(this)" onmouseout="Servicio(this)"/>
 
<img src="inst.jpg" alt="instala" id="instalaciones" onmouseover="InstalacionAct(this)" onmouseout=	"Instalacion(this)"/>
 
<img src="salon.jpg" alt="salon" id="salon"
onmouseover="SalonAct(this)" onmouseout="Salon(this)"/>
 
<img src="sports.jpg" alt="deportes" id="deportes" onmouseover="DeportesAct(this)" onmouseout="Deportes(this)"/>
 
<img src="contact.jpg" alt="contacto" id="contacto" onmouseover="ContactoAct(this)" onmouseout="Contacto(this)"/>
]

All of those have the same shape and size. Now using one pair for each of ...

function HomeAct(obj){obj.src='home.png';}
function Home(obj){obj.src='home.jpg';}

I create a rollover efect to a second image which is not only bigger but has a different shape (it would work similar to a layared menu(?)) my problem is that when I step into home it sends all other images to next line, how can I prevent this?

#home{
	padding-left:78.5px;
}
#services{
	padding-right:6px;
}
#services:hover{
	position:relative;
	left:82px;
	top:0px;
}
#instalaciones{
	padding-right:6px;
}
#instalaciones:hover{
	padding-left:82px;
    padding-right:6px;
}

Thanks in advance for information you can provide!

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 2 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

Dont use JS to create

Dont use JS to create rollovers. CSS is better. research the term sprites