Problema HTML!

HTMLFAIL! · Janeiro 20, 2010

ola!!Eu sou Portugês, vivo em Lisboa e tenho um problema num blog que comecei á uns dias atras.

o nome do blog é http://sobradores.blogspot.com

foi feito para ser um travelblog.

O que eu queria saber era se era possivel clicar num separador tipo "who are we?" ou "sponsorship" e a imagem em baixo mudar.

um amigo meu que sabe um pouco de Html diz que isso é impossivel porque não foi feito com esse proposito, foi feito com o proposito de header.eu fiquei um bocado chateado pois já tinha planeado algumas coisas com aquele template e acho que o template e muito bacano.

alguém me pode ajudar a dizer ao meu amigo que ele está errado??

aqui esta o link para downloadares o html do template http://btemplates.com/download/1116/" target="_blank">. http://btemplates.com/download/1116/

aqui esta parte do código se n quizeres fazer o downld (apaguei algumas partes q achei desnecessárias)

<

.sidebar {
color:#EEEEEE;
line-height:1.5em;
}
.sidebar ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
}
.sidebar li {
line-height:1.5em;
margin:0;
padding:0 0 0.25em 15px;
text-indent:-15px;
}
.sidebar .widget, .main .widget {
margin:0 0 1.5em;
padding:0 0 1.5em;
}
.main .Blog {
border-bottom-width:0;
}
.profile-img {
border:1px solid #CCCCCC;
float:left;
margin:0 5px 5px 0;
padding:4px;
}
.profile-data {
color:#999999;
font-family:'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif;
font-size:78%;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
letter-spacing:0.1em;
line-height:1.6em;
margin:0;
text-transform:uppercase;
}
.profile-datablock {
margin:0.5em 0;
}
.profile-textblock {
line-height:1.6em;
margin:0.5em 0;
}
.profile-link {
font-family:'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif;
font-size:78%;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
letter-spacing:0.1em;
line-height:normal;
text-transform:uppercase;
}
#templatemo_footer {
background:transparent url(http://1.bp.blogspot.com/_t47uhxwKFVM/SkxRGvkQEdI/AAAAAAAAAi8/ExTnSyxKMU0/s1600/templatemo_footer_bg.jpg) no-repeat scroll center top;
clear:both;
color:#999999;
padding:20px 0;
text-align:center;
width:960px;
}
#templatemo_footer a {
color:#FFFFFF;
font-weight:normal;
}
#templatemo_menu {
background:transparent url(http://1.bp.blogspot.com/_Zt-MFCckzsc/Sj9cdeeup3I/AAAAAAAABo0/V0I8DHIfVvI/s1600/menu_bg.jpg) no-repeat scroll right center;
clear:both;
height:45px;
margin:0 20px -14px;
position:relative;
width:920px;
}
#templatemo_menu span {
background:transparent url(http://2.bp.blogspot.com/_u1lLXYtR-ow/Sj9xHgpef6I/AAAAAAAAA18/--i5GJuuezY/s1600/menu_bg_left.jpg) no-repeat scroll 0 0;
height:45px;
left:0;
position:absolute;
top:0;
width:5px;
}
#templatemo_menu ul {
height:45px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0 auto;
padding:0 0 0 10px;
}
#templatemo_menu ul li {
float:left;
padding-right:5px;
}
#templatemo_menu li a {
color:#000000;
display:block;
float:left;
font-size:12px;
height:45px;
line-height:45px;
padding:0 0 0 8px;
text-align:center;
}
#templatemo_menu li a b {
display:block;
float:left;
padding:4px 24px 0 16px;
}
#templatemo_menu li.current a, #templatemo_menu li a:hover {
background:transparent url(http://i145.photobucket.com/albums/r214/joaomm/hoverleft.jpg) no-repeat scroll left top;
color:#FFFFFF;
text-decoration:none;
}
#templatemo_menu li.current a b, #templatemo_menu li a:hover b {
background:transparent url(http://i145.photobucket.com/albums/r214/joaomm/AAA.jpg) no-repeat scroll right top;
color:#FFFFFF;
padding-top:0;
text-decoration:none;
}
#templatemo_banner {
background:#B7BD19 url(http://i145.photobucket.com/albums/r214/joaomm/banngger2_bg.jpg) no-repeat scroll left top;
clear:both;
height:245px;
width:960px;
}
#templatemo_banner p {
color:#333333;
font-size:13px;
line-height:20px;
padding:134px 0 0 70px;
text-align:left;
width:400px;
}
#templatemo_banner a {
color:#000000;
}
#content-wrapper {
background:transparent url(http://2.bp.blogspot.com/_u1lLXYtR-ow/Sj9yAA4IL0I/AAAAAAAAA2c/Q4radZmt934/s1600/content_bg.jpg) repeat-y scroll 0 0;
}
.widget-content {
padding-left:20px;
padding-right:20px;
}


]]></b:skin>
  </head>

  <body>
  <div id='outer-wrapper'><div id='wrap2'>

    <!-- skip links for text browsers -->
    <span id='skiplinks' style='display:none;'>
      <a href='#main'>skip to main </a> |
      <a href='#sidebar'>skip to sidebar</a>
    </span>

    <div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Sobradores (Cabeçalho)' type='Header'/>
</b:section>
 <div id='templatemo_menu'>
        <span/>
        <ul>
            <li class='current'><a Title='Home' expr:href='data:blog.homepageUrl'><b>Home</b></a></li>
            <li><a href='#'><b>Who are we?</b></a></li>
            <li><a href='#'><b>Sponsorships</b></a></li>
            <li><a href='#'><b>Partners</b></a></li>
            <li><a href='#'><b>Company</b></a></li>
            <li><a href='#'><b>Contacts</b></a></li>

    <li><a expr:href='data:blog.homepageUrl + "feeds/comments/default"'><b>Comments RSS</b></a></li>
    
        </ul>

    </div> <!-- end of menu -->
    
    <div id='templatemo_banner'>
        <p/>
    </div>

    </div> <!-- end of banner -->
    
    <div id='content-wrapper'>

      <div id='crosscol-wrapper' style='text-align:center'>
        <b:section class='crosscol' id='crosscol' showaddelement='no'/>
      </div>

      

  </div></div> <!-- end outer-wrapper -->
</body>
</html>

para encontrarem a imagem que eu queria que mudasse para outra, esta aqui o link http://i145.photobucket.com/albums/r...nngger2_bg.jpg .

eu sou uma caca no html por isso se me explcarem ,expliquem-me como se fosse um miudo d 6 anos,

Ou se acharem que é mais rapido podem altera-lo vces manualmente, eu douvos o mail e a pass do administrador.Se fizereme este favor, eu estaria a vossa inteira diposição para fazer qualquer coisa rel. com photoshop, pois apesar d não me gostar de gabar, sou muinto bom com PS. :cool:

obrg pelo vosso tempo e espero q o meu amigo esteja errado!!

fico á espera de respostas dos meus camaradas brasileiros!

lobismano · Janeiro 23, 2010

E ai, tudo ok.

Primeiro você cria um script para receber e trocar a imagem

function mudaimg(valor)

{

document.getElementById('templatemo_banner').style.background = 'url('+valor+') no-repeat scroll left top';

}

</script>

Depois você passa o endereço da imagem no evento Onclick dos links

<li><a href='#'onclick="mudaimg('http://2.bp.blogspot.com/_u1lLXYtR-ow/Sj9xt33B_dI/AAAAAAAAA2U/LgT-RdOtbzs/s1600/banner_bg.jpg');">Sponsorships</a></li>

<li><a href='#'onclick="mudaimg('http://2.bp.blogspot.com/_u1lLXYtR-ow/Sj9xt33B_dI/AAAAAAAAA2U/LgT-RdOtbzs/s1600/banner_bg.jpg');">Partners</a></li>

<li><a href='#'onclick="mudaimg('http://2.bp.blogspot.com/_u1lLXYtR-ow/Sj9xt33B_dI/AAAAAAAAA2U/LgT-RdOtbzs/s1600/banner_bg.jpg');">Company</a></li>

<li><a href='#'onclick="mudaimg('http://2.bp.blogspot.com/_u1lLXYtR-ow/Sj9xt33B_dI/AAAAAAAAA2U/LgT-RdOtbzs/s1600/banner_bg.jpg');">Contacts</a></li>

At.

Entrar

Problema HTML!

Pergunta

HTMLFAIL!

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

lobismano

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades