Como eu faço Pop up Menu- customizado para blogger.

Bom, eu fiquei sabendo desse Project html atravéz de minha cbox no blog [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] , como eu vi que você entende pra caramba de html queria tirar uma duvida aqui. O meu blog é de wallpapers e eu estou sempre fazendo o possivel, usando os melhores widgets para customizar meu blog e deixa-lo mais bonito.
A ultima coisa que eu tentei fazer que exigiu horas de trabalho de mim e do meu parceiro admin think0 foi tentar fazer o meu pop up menu com as resoluções dos wallpapers, mas não conseguimos.
De uma olhada nesse outro site de wallpaper, a ideia veio daqui.
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Esse é um post de um wallpaper, você pode ver que o botão download está apagado, e se você tenta clicar nele da um javascript alert que pede para que você escolha uma resolução no popup menu, então você escolhe a resolução e clica no botão download, o botão download assende quando você escolhe a resolução, acredito que fazer isso seja mais complicado, mas eu só queria um botão que quando você escolhesse a resolução é só clicar no botão e ele direciona para uma outra pagina, onde tera o wallpaper com a resolução correspondente. No caso eu uso o [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] ai eu hospedaria a imagem e colocaria o link la no popup menu.

Ao ver o html da pagina do interfacelift eu achei o html do popup menu. Ele se localiza assim:

<option value="">Select Resolution:</option>
<option value=""></option>
<optgroup label="Widescreen 16:10">
<option id="res_2560x1600_1" value="2560x1600">2560x1600</option>

<option id="res_1920x1200_1" value="1920x1200">1920x1200</option>
<option id="res_1680x1050_1" value="1680x1050">1680x1050</option>
<option id="res_1440x900_1" value="1440x900">1440x900</option>
<option id="res_1280x800_1" value="1280x800">1280x800</option>
</optgroup>
<optgroup label="Fullscreen 4:3">
<option id="res_1600x1200_1" value="1600x1200">1600x1200</option>

<option id="res_1400x1050_1" value="1400x1050">1400x1050</option>
<option id="res_1280x960_1" value="1280x960">1280x960</option>
<option id="res_1024x768_1" value="1024x768">1024x768</option>
</optgroup>
<optgroup label="Fullscreen 5:4">
<option id="res_1280x1024_1" value="1280x1024">1280x1024</option>
</optgroup>

<optgroup label="HDTV 16:9">
<option id="res_1920x1080_1" value="1920x1080">1080p</option>
<option id="res_1280x720_1" value="1280x720">720p</option>
</optgroup>
<optgroup label="Dual Monitors">
<option id="res_2560x1024_1" value="2560x1024">2560x1024</option>
</optgroup>

<optgroup label="Mobile">
<option id="res_800x480_1" value="800x480">800x480</option>
<option id="res_480x272_1" value="480x272">480x272 (PSP)</option>
<option id="res_320x480_1" value="320x480">320x480 (iPhone)</option>
<option id="res_320x240_1" value="320x240">320x240 (iPod)</option>
</select>
<div id="dl_1619" style="float: right;">
<img src="/img_NEW/button_download_disabled.png" alt="Select your desired resolution from the menu to the left, then click here to download." title="Select your desired resolution from the menu to the left, then click here to download." align="center" onclick="javascript:alert('Please select your screen resolution from the popup menu prior to clicking the download button.')" />

</div>
</div>
</div>


Você saberia me dizer se tem como eu fazer um menu popup assim para colocar no meu blog. Direcionando cada resolução para uma imagem no imageshack? Aguardo uma resposta....Vlw :cheers:

puts foda fala isso mas cara =( inpossivel porque o HTML não faz um comando executar o otro por isso não da é inpossivel usando HTML aquilo ali funciona com javascript

Mas como eu so bomzinho demorei 1 hora aqui fazendo esse script :P para não ti deixar na mão ^^

Código:

<center><img src="http://www.ousig.com/uploads/d8nilnm0.jpg" width="250"></img></center>
<br>
<script language=JavaScript>
<!--
Keyword = new Object();
Descrip = new Object();
Address = new Object();
Keyword[0] = 6
Keyword[1] = "1024x768"
Descrip[1] = "Imagem no tamanho de 1024x768"
Address[1] = "http://www.ousig.com/uploads/7a2jmsip.jpg"
Keyword[2] = "1280x960"
Descrip[2] = "Imagem no tamanho de 1280x960"
Address[2] = "http://www.ousig.com/uploads/pbcqrck9.jpg"
Keyword[3] = "1400x1050"
Descrip[3] = "Imagem no tamanho de 1400x1050"
Address[3] = "http://www.ousig.com/uploads/il0uqnfv.jpg"
Keyword[4] = "1600x1200"
Descrip[4] = "Imagem no tamanho de 1600x1200"
Address[4] = "http://www.ousig.com/uploads/l1ikgj5m.jpg"
function checkDatabase() {
var Found = false
var Item = document.forms[0].searchfor.value.toLowerCase();
stats='toolbar=no,location=no,directories=no,status=no,menubar=no,height=300,width=300,'
stats += 'scrollbars=yes,resizable=no'
MsgBox = window.open ("","msgWindow",stats)
MsgBox.opener = window;
MsgBox.opener.name = "opener";
MsgBox.document.write("<head><title>Resultado</title><style>body A:link {COLOR: #003366; TEXT-DECORATION: none} A:visited {COLOR: #003366; TEXT-DECORATION: none} A:active {COLOR: #003366; TEXT-DECORATION: none} A:hover {COLOR: #003366; TEXT-DECORATION: underline}</style></head>");
MsgBox.document.write ("<body bgcolor=white text=black link=blue vlink=darkblue alink=blue><CENTER><font face=Verdana, Arial, Helvetica, sans-serif size=2>Resultado:</CENTER>")
MsgBox.document.write ("<font size=1><center>Busca por :  "+Item+"</center><hr width=80% size=1 color=#000000></font>");
for (var i=1; i <= Keyword[0]; i++) {
if(Item == Keyword[i]) {
Found = true;
MsgBox.document.write ("<li><font face=Verdana, Arial, Helvetica, sans-serif><font size=1>"+Descrip[i]+"<BR><A HREF="+Address[i]+" target='_blank'>Clique aqui para baixar</A></font></font>")
}
}
if(!Found)
MsgBox.document.write ("Não foi possivel localizar nada com este nome!")
MsgBox.document.write ("<FORM><CENTER>")
MsgBox.document.write ("<font size=2><INPUT type='button' value='Fechar' onClick = 'self.close()' style='font-family:arial; font-size:9pt; color:black; background-color:#CCCCCC; border:black; border-style:groove; border-top-width:1px; border-bottom-width:1px; border-right-width:1px; border-left-width:1px'}></font></font>")
MsgBox.document.write ("</CENTER></FORM>")
MsgBox.document.write ("<font color=white><font face=Verdana, Arial, Helvetica, sans-serif><font size=1><font color=black>Project HTML<br></font>")
}
//-->
</script>
 </div> <form name=form1><p align=center><font size=1 face="Verdana, Arial, Helvetica, sans-serif">Coloque sua resolução abaixo:<br> <input type=text size=20 name=searchfor> <b> <br><input type=button value=Procurar align=absmiddle onClick=checkDatabase() name=button> </b><br><br> <font color=003366>Exemplos: <b>1024x768, 1280x960, 1400x1050, 1600x1200.</b>.</font></font></p> </form>
        <p>&nbsp;</p>
        <p>

Se ajudar comente ai ok ^^

Depois de todo seu esforço ai não poderia deixar de comentar. Houve alguns problemas :( quando eu coloco o nome da resolução no espaço e ponho procurar não acontece nada, não vai para nem um link. Não tem uma maneira de fazer aquele pop up menu? Abrir um menuzinho pra baixo que você escolhe a resolução e quando clica em ''procurar'' como está escrito la no botão que vc fez num desse pra ir pra pagina?

seguinte se possivel add eu msn para eu ti ajudar com este problema vou procurar alguma coisa do jeito que você quer ou vo tentar fazer mas.. não prometo nada eu não sei muito de script ok ^^ [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] :cheers:

Esse aqui funciona certo testa ele la =)

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Teste de option com css e html por projecthtml.tk</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style>
.bordaBox {bbackground: ttransparent; width:20%;}
.bordaBox .b1, .bordaBox .b2, .bordaBox .b3, .bordaBox .b4, .bordaBox .b1b, .bordaBox .b2b, .bordaBox .b3b, .bordaBox .b4b {display:block; overflow:hidden; font-size:1px;}
.bordaBox .b1, .bordaBox .b2, .bordaBox .b3, .bordaBox .b1b, .bordaBox .b2b, .bordaBox .b3b {height:1px;}
.bordaBox .b2, .bordaBox .b3, .bordaBox .b4 {background:#CECECE; border-left:1px solid #999; border-right:1px solid #999;}
.bordaBox .b1 {margin:0 5px; background:#999;}
.bordaBox .b2 {margin:0 3px; border-width:0 2px;}
.bordaBox .b3 {margin:0 2px;}
.bordaBox .b4 {height:2px; margin:0 1px;}
.bordaBox .conteudo {padding:5px;display:block; background:#CECECE; border-left:1px solid #999; border-right:1px solid #999;}
</style>
<body>

<div class="bordaBox">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="conteudo">
<div id='sidebar1-wrapper'>
<div class='widget Label' id='Label1'>
<div class='widget-content'>
<select onchange='location=this.options[this.selectedIndex].value;'>
 
<! Modifique só daqui pra baixo !>
 
<option>Selecione a resolução</option>
<option value='http://www.projecthtml.tk/'> 800x600</option>
<option value='http://www.google.com.br'> 1024x768</option>
<option value='http://www.uol.com.br/'> 1280x1024</option>
 
<! Modifique só daqui pra cima !>
 
</div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>
</body>
</html>