Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

BRG

[Resolvido] Problema com Jquery e Css

Por , em Javascript

Recommended Posts

BRG    2

BRG
Postado

Bom dia pessoal.

Estou com um problema e gostaria de pedir ajuda de vcs.

 

Estou montando um banner em Jquery igual a este:

http://demo.soucafecomleite.com.br/jquery-innerfade/jquery-innerfade.htm

 

O problema é que o meu banner é uma unica imagem dividida em 4 partes:

http://i28.tinypic.com/287mz2w.jpg

E para piorar, ele fica alterando as posições

http://i30.tinypic.com/2z6ikae.gif

Então qual é o problema?

Quero fazer uma unica imagem, dividia em 4 partes e cada uma destas 4 partes tenham um link. Porem quando mudar a imagem o link também tem que mudar para a posicão da imagem, e não ficar fixo.

 

Acredito que tenha que fazer um display block mudando os ids com jquery, mais eu não sei...

 

Valeu

Compartilhar este post

Link para o post
Compartilhar em outros sites

BRG    2

BRG
Postado

Poste o HTML

Segue o HTML

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>..:: Hairs Company ::..</title>
<link rel="stylesheet" type="text/css" href="includes/css/styles.css" media="screen" />
<script type="text/javascript" src="includes/js/jquery.js"></script>
<script type="text/javascript" src="includes/js/jquery.innerfade.js"></script>
<script type="text/javascript">
$(document).ready(
  function(){			
	$('ul#slide').innerfade({
	speed: 1500,
	timeout: 5000,
	type: 'sequence',
	containerheight: '240px'
  });					
});
</script>
</head>
<body>




<div id="geral">
<div id="topo"></div>
 <div id="menu">
   <ul id="slide">					
	<li><img src="img/1.jpg" width="780" height="287" border="0" usemap="#Map" /></li>
	<li><img src="img/2.jpg" width="780" height="287" border="0" usemap="#Map" /></li>
	<li><img src="img/3.jpg" width="780" height="287" border="0" usemap="#Map" /></li>
   </ul>
 </div>
<div id="linha-menu"></div>
<div id="bottom"><img src="img/bottom-index.jpg" width="780" height="610" alt="Hairs Company" /></div>
</div>
<map name="Map" id="Map">
  <area shape="rect" coords="217,13,292,31" href="blond.html" />
  <area shape="rect" coords="315,14,388,32" href="blond.html" />
  <area shape="rect" coords="410,13,481,32" href="blond.html" />
  <area shape="rect" coords="502,15,571,32" href="blond.html" />
</map>
</body>
</html>

coloque um id em cada imagem e vá mudando o src delas conforme for clicando, qual a dificuldade?

???? Não entendi....

Compartilhar este post

Link para o post
Compartilhar em outros sites

XauDH    0

XauDH
Postado

Estou montando um banner em Jquery igual a este:

http://demo.soucafecomleite.com.br/jquery-innerfade/jquery-innerfade.htm

O banner que você está fazendo tem o "funcionamento" igual a esse?

 

Você pode usar o plugin do jquery que chama jcycle, ele vai mudar as imagens e mudar o link pra cada uma respectivamente.

 

Link do plugin: jQuery Cycle Plugin

 

O html do seu banner ficaria parecido com isso:

<div id="slide">
	<a href="link1.html"><img src="img1.jpg" /></a>
	<a href="link2.html"><img src="img2.jpg" /></a>
	<a href="link3.html"><img src="img3.jpg" /></a>
	<a href="link4.html"><img src="img4.jpg" /></a>
</div>

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

BRG    2

BRG
Postado

Quando postei o código HTML esqueci do CSS

 

/* TAGS GERAIS */
* { border:0; font-size:100%; margin:0; padding:0;}

/* ESTRUTURA GERAL */
body {background-color:#e0c574}
#geral {margin:auto; text-align:left; width:100%; height:100%; background-color:#e0c574;}

/* TOPO */
#topo{width:780px; height:168px; margin:auto; background-image:url(../../img/head-red-p1.gif); background-repeat:no-repeat;}
#menu{width:780px; height:287px; margin:auto; background-image:url(../../img/1.jpg); background-repeat:no-repeat;}
#bottom{width:780px; height:610px; margin:auto;}
#linha-menu{ width:780px; height:49px; margin:auto; background-image:url(../../img/head-red-p3.gif);}

/* BLOND */
#topo-blond{width:780px; height:168px; margin:auto; background-image:url(../../img/head-blond-p1.gif); background-repeat:no-repeat;}
#linha-blond{ width:780px; height:49px; margin:auto; background-image:url(../../img/head-blond-p3.gif);}
#menu-blond{width:780px; height:287px; margin:auto; background-image:url(../../img/blond.jpg); background-repeat:no-repeat;}


/* SLIDE */
ul#slide{list-style-type:none;}
#link h1 a {display:block; width:196px; height:51px; position:relative; z-index:1; margin:0px;}
#link h1 a span {display:none;}
/*ul#slide li img {border:1px solid #CCCCCC; padding:4px;}*/

,

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

O jeito que você está fazendo não é o melhor...

 

Primeiro porque a imagem toda vai ser carregada junto com a página, fazendo com que demore mais...

 

Segundo que você nao pode dar ids para cada imagem e tratá-las em separado...

 

Reveja isso...

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

BRG    2

BRG
Postado

O jeito que você está fazendo não é o melhor...

 

Primeiro porque a imagem toda vai ser carregada junto com a página, fazendo com que demore mais...

 

Segundo que você nao pode dar ids para cada imagem e tratá-las em separado...

 

Reveja isso...

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Segundo o Maujor

Você terá que refazer sua marcação HTML para obter os links rotativos.

Use quatro listas para conter as imagens e seus links separadamente e depois

aplique o plugin jcycle em cada uma delas.

Para o menu de navegação não use mapa de imagem, prefira uma lista e posicione

com position:absolute.

Obrigado a todos..

 

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito