Ir para conteúdo

POWERED BY:

Arquivado

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

natimarinho

Link em parte da imagem header

Por , em Desenvolvimento frontend

Recommended Posts

natimarinho    0

natimarinho
Postado

Eu sei como mapear imagem para colocar links em determinadas partes dela, já fiz algumas vezes, mas comecei a usar um template que tem algo de diferente e não estou conseguindo mapear a imagem do HEADER.

 

Vocês podem ver aqui: http://www.diannaagronbrasil.com/

Quero colocar link em "Home", "Dianna", "Galeria" e "Info".

 

O problema é que eu sempre colocava <img src...> e mapeava a imagem. Nesse template a imagem do HEADER está nesse caminho "<div id="top_frame">". Se tento mudar para o <img src="..."> desconfigura tudo!

 

Bom, vou postar abaixo os códigos do header.php e do mapeamento que já criei. Espero que alguém possa ajudar!

 

header.php

<!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" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title('» ',true,'right'); ?><?php bloginfo('name'); ?><?php echo ($paged>1)? " - Page $paged":"";?></title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<!--[if lte IE 6]>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/ie.css" type="text/css" media="screen" />
<![endif]-->
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_get_archives('type=monthly&format=link'); ?>
<?php //comments_popup_script(); // off by default ?>
<?php wp_head(); ?>
</head>
<body>
<!-- wrapper start -->
<div id="wrapper"><div id="bottom_bg"><div id="bottom_frame"><div id="top_frame"><div id="top_container">
<!-- header start -->
<div id="header">
<?php $tmp=(is_single() || is_page())? "div":"h1";?>
	<<?php echo $tmp;?>  id="blog_title"><a href="<?php bloginfo('url'); ?>">         </a></<?php echo $tmp;?>>
	<h2></h2>
	<div id="menu">
		<ul>

		</ul>
	</div>
       <div id="rss"></div>

</div>
<!-- header end -->

 

Mapeamento:

 

<img src="http://www.diannaagronbrasil.com/wp-content/themes/versao2/images/top_frame.jpg" width="1440" height="406" border="0" usemap="#Map" />
<map name="Map" id="Map">
 <area shape="rect" coords="762,135,825,177" href="#" />
 <area shape="rect" coords="856,135,932,179" href="#" />
 <area shape="rect" coords="961,135,1054,182" href="#" />
 <area shape="rect" coords="1078,133,1149,184" href="#" />
</map>

Compartilhar este post

Link para o post
Compartilhar em outros sites

crisDeveloper    0

crisDeveloper
Postado

já passei por algo parecido e posso dizer que realmente quando você trabalha com links em imagens você tem que ter muita paciencia mesmo pois mesmo colocando border="0" as coisas ficam bem desarrumadas a imagem ocupa um espaço maior do que quando estava sem link.

 

tive alguns problemas pra arrumar uns links em imagens de um site que estou criando só faltei surtar de tanta raiva!

 

enfim qual a área que você deseja mesmo colocar o link?

 

acho que seria mais fácil se você disponibilizasse um link para o template. só com o código não dá pra resolver muito já o problema na hora de colocar um link na imagem...

 

tenta criar slices com o fireworks já deu certo comigo uma vez!

 

haaa no dreamweaver você também pode fazer o mapeamento de forma bem mais simples! é só selecionar a imagem e lá na parte inferior esquerda tem umas formas para você mapear sua imagem incluse esferica! veja lá!

Compartilhar este post

Link para o post
Compartilhar em outros sites

natimarinho    0

natimarinho
Postado

Então, eu já fiz o mapeamento no Dreamweaver, até coloquei o código pronto do mapeamento ali em cima. O problema é que não estou conseguindo colocar NO template no site, não dá certo. Tinha colocado link pro template, ele tá aqui, oh: http://www.diannaagronbrasil.com/

 

Coloquei a imagem do template com a parte para mapear numa figura pra ficar mais entendível...

O template é assim:

 

a9efd8204155816.jpg

 

O que está e vermelho é onde ficarão os links. E, como disse, fazer o mapeamento eu sei, fiz pelo Dreamweaver, mas não estou sabendo como colocar ele no header.php (que já colei todo o código aqui)

 

Ninguém? :(

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

Ninguém? :(

 

Corte as imagens e utilize cada uma como link. A forma como está fazendo vai contra uma série de boas práticas.

Compartilhar este post

Link para o post
Compartilhar em outros sites

natimarinho    0

natimarinho
Postado

Corte as imagens e utilize cada uma como link. A forma como está fazendo vai contra uma série de boas práticas.

 

 

Seria fazer com que cada parte dali fosse um link? Exemplo, "Home" ser uma imagem e a partir dai fazer o link, etc?

 

Mas como eu informaria o lugar exato em que as figuras deveriam ficar no código?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

Seria fazer com que cada parte dali fosse um link? Exemplo, "Home" ser uma imagem e a partir dai fazer o link, etc?

 

Mas como eu informaria o lugar exato em que as figuras deveriam ficar no código?

 

Como todo mundo faz:

 

http://www.maujor.com/tutorial/boxmodelhack.php

Compartilhar este post

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

Informação importante

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

  Aceito