| FeaR51 | 09.05.2011 00:28 |
melky
Ах да чуть не забыл спасибо вам огромное, если бы не вы я бы недодумался до многого)
Ах да чуть не забыл спасибо вам огромное, если бы не вы я бы недодумался до многого)
If можно поточнее?
Можно поточнее об этом?
к примеру как можно оформить function если нада указать либо изображение, либо по id в if? |
function имя() - как заместо имени использовать, id или указать имя селектора к примеру div?
if () - как тут указать что если изображние? или что если в определенной области был загружен тот то файл? к примеру page1.html {() - а тут указать на какое заменять? просто я хочу реализовать при динамическом обновление, была та или иная картинка, в определенных id |
Цитата:
var ololo = function(){};
Цитата:
|
Цитата:
<body>
<p>Какую страницу желаете открыть?</p>
<form>
<input id="btn1" type="button" value="Страница 1">
<input id="btn2" type="button" value="Страница 2">
</form>
<div id="content"></div>
<script>
$(document).ready(function(){
$('#btn1').click(function(){
$.ajax({
url: "page1.html",
cache: false,
success: function(html){
$("#content").html(html);
}
});
});
$('#btn2').click(function(){
$.ajax({
url: "page2.html",
cache: false,
success: function(html){
$("#content").html(html);
}
});
});
});
</script>
</body>
вот код как прописать что если в div id="content", загружен в данный момент page1.html, то картинка кнопки #btn1 будет та то. |
Цитата:
|
<form> <img src="on.png" border="0"<INPUT id="btn1" TYPE="button" name="img1" VALUE="Страница 1"</img><img src="kpz.png" name="img3" <INPUT id="btn2"></img><IMG SRC="cvz.png" name="img2"<INPUT id="btn3"></img> </form> ой вот форм тот что нада. |
все равно непонятно, чего вы хотите
<img src="on.png" border="0"<INPUT id="btn1" TYPE="button" name="img1" VALUE="Страница 1"</img> неверная конструкция. тег img не закрывается (одиночный) а это верно <img src="on.png" border="0" name="img1"/> <INPUT id="btn1" TYPE="button" VALUE="Страница 1" /> |
спасибо но как мне построить if ?
я хочу что при выбранном если в div id="content", загружен в данный момент page1.html у name="img1" будут свойства что onClick = on2.png что onMouseOut=on2.png и onMouseOver. просто вот в другом который я пытался заклепать
</script>
<form>
<a id="im" onMouseOver="document.img1.src='/on3.png'" onMouseOut="document.img1.src='/on.png'" onClick="document.img1.src='/on2.png'"><img src="on.png" name="img1"<INPUT id="btn1"></img><input type="hidden" id="tmp" value="on2.png" ></a><a id="im2" onMouseOver="document.img3.src='kpz3.png'" onMouseOut="document.img3.src='kpz.png'"><img src="kpz.png" name="img3" <INPUT id="btn2"></img><input type="hidden" id="tmp2" value="kpz2.png" ></a><a id="im3" onMouseOver="document.img2.src='cvz3.png'" onMouseOut="document.img2.src='cvz.png'"><IMG SRC="cvz.png" name="img2"<INPUT id="btn3"></img><input type="hidden" id="tmp3" value="cvz2.png" ></a>
</form>
<script>
$(document).ready(function(){
$('#btn1').click(function(){
document.img1.src='on2.png'
$.ajax({
url: "page1.html",
cache: false,
success: function(html){
$("#content").html(html);
}
});
});
$('#btn2').click(function(){
$.ajax({
url: "page2.html",
cache: false,
success: function(html){
$("#content").html(html);
}
});
});
$('#btn3').click(function(){
$.ajax({
url: "page3.html",
cache: false,
success: function(html){
$("#content").html(html);
}
});
});
});
$(document).ready(function(){
$("#btn1").click(function () {
var src = $("#btn1").attr("src");
var tmp = $("#tmp").val();
$("#im").fadeOut("slow", function () {
$("#btn1").attr("src", tmp);
});
$("#im").fadeIn("slow");
$("#tmp").val(src);
});
$("#btn2").click(function () {
var src = $("#btn2").attr("src");
var tmp = $("#tmp2").val();
$("#im2").fadeOut("slow", function () {
$("#btn2").attr("src", tmp);
});
$("#im2").fadeIn("slow");
$("#tmp2").val(src);
});
$("#btn3").click(function () {
var src = $("#btn3").attr("src");
var tmp = $("#tmp3").val();
$("#im3").fadeOut("slow", function () {
$("#btn3").attr("src", tmp);
});
$("#im3").fadeIn("slow");
$("#tmp3").val(src);
});
});
</script>
<div id="content"></div>
вроде все работало, но мне нада что если выбран page1.html то картинка которая соответсовала этому перестала меняться при onClick,onMouseOut и onMouseOver |
назначить общий обработчик для всех кнопок и проверять по ID
можно через switch, а не через if\else if\else <form name=form> <img src="img0.jpg" id="img"> <input type=button id=btn1 value="один"> <input type=button id=btn2 value="два"> <input type=button id=btn3 value="три"> </form>
$('form button').click(function(){
var page, image ;
if( this.id === "btn1" ) {
page = "page1.html";
image = "img1.jpg";
} else if ( this.id === 'btn2' ){
page = 'page2.html';
image = 'img2.jpg';
} else {
page = 'page3.html';image='img3.jpg';
}
document.getElementById("img").src = image;
$.ajax({
url: page,
cache: false,
success: function(html){
$("#content").html(html);
}
});
});
|
http://creators-site.ru/index.html вот посмотри как работает.
|
о спс щас попробую
|
хм не работает( и свичем мне не особо подходит(
я хочу чтобы было как тут сейчас http://creators-site.ru/index.html но картинка выбранного page.html оставалась не изменной при наведение, уведение и клике, оставалась *2.png |
вместо
$(document).ready(function(){
$('#btn1').click(function(){
document.img1.src='on2.png'
$.ajax({
url: "page1.html",
cache: false,
success: function(html){
$("#content").html(html);
}
});
});
$('#btn2').click(function(){
$.ajax({
url: "page2.html",
cache: false,
success: function(html){
$("#content").html(html);
}
});
});
$('#btn3').click(function(){
$.ajax({
url: "page3.html",
cache: false,
success: function(html){
$("#content").html(html);
}
});
});
});
вставьте
$(document).ready(function(){
$( "div.content form input" ).click(function(){
$("div.content form img").attr( "src", function(a,b){ return b.replace(/(\w+)3(\.png)/, "$1$2") } );
var num = this.id.replace(/\W+/,'')
$( "div.content form img[name='img"+num+"']" ).attr( "src", function(a,b){ return b.replace(/(\w+)(\.png)/, "$13$2") } );
$.ajax({
url: "page"+num+".html",
cache: false,
success: function(html){
$("#content").html(html);
}
});
});
});
это не помогло. мешает обработчик mouseout. он вставляет картинку обратно. сделайте через :hover |
не помогло, после изминения перестало работать динамическое обновление.
Цитата:
|
через CSS, а не javascript
|
Цитата:
|
как я понял через это
a:hover, a:active, a:focus {
text-decoration: none;
}
|
я тут скрипт немного переделал и ваш немного затронул) посмотрите)
- что все равно не тыкаються изображения.
$(document).ready(function(){
$( "div.buttons" ).click(function(){
$("div.buttons img").attr( "src", function(a,b){ return b.replace(/(\w+)3(\.png)/, "$1$2") } );
var num = this.id.replace(/\W+/,'')
$( "div.buttons img[name='img"+num+"']" ).attr( "src", function(a,b){ return b.replace(/(\w+)(\.png)/, "$13$2") } );
$.ajax({
url: "page"+num+".html",
cache: false,
success: function(html){
$("#content").html(html);
}
});
});
});
<div id="buttons"> <img src="on.png" border="0" alt="О нас" name="img1" id="btn1"/><img src="kpz.png" border="0" alt="Как сделать заказ" name="img2" id="btn2"/><img src="cvz.png" border="0" alt="Связь" name="img3" id="btn3"/> </div> p.s. через hover не то, он не заменяет картинку я лишь меняет background вокруг картинки. |
$(document).ready(function(){
$('#btn1').click(function(){
document.img1.src='on2.png'
document.img2.src='kpz.png'
document.img3.src='cvz.png'
$.ajax({
url: "page1.html",
cache: false,
success: function(html){
$("#content").html(html);
}
});
});
$('#btn2').click(function(){
document.img1.src='on.png'
document.img2.src='kpz2.png'
document.img3.src='cvz.png'
$.ajax({
url: "page2.html",
cache: false,
success: function(html){
$("#content").html(html);
}
});
});
$('#btn3').click(function(){
document.img1.src='on.png'
document.img2.src='kpz.png'
document.img3.src='cvz3.png'
$.ajax({
url: "page3.html",
cache: false,
success: function(html){
$("#content").html(html);
}
});
});
});
Нашел решение!) думаю что через focus, и hover остальное реализую |
и вопрос напоследок,
<script type="text/javascript"> Now = new Date();document.write("Сегодня " + Now.getDate()+ "." + Now.getMonth() + "." + Now.getFullYear() + ". Вы посетили нас: " + Now.getHours() + ":" + Now.getMinutes() + " и " + Now.getSeconds() + " секунд.") </script> как вот это закрепить внизу страницы? |
melky
Ах да чуть не забыл спасибо вам огромное, если бы не вы я бы недодумался до многого) |
| Часовой пояс GMT +3, время: 07:54. |