CSS и JS: промяна на размера на background-изображение

[sizif]

Здравейте!

Имам страница, в която ще показвам изображение.
Искам върху него да сложа прозрачен гиф с размер 1рх на 1 рх, който ще разтягм върху първото изображение.

Спрях се на идеята първото изображение да е бекграунд, за да мога да разтегля гиф-а върху него.

Изображението може да бъде с големи размери, а аз бих искал да го намаля без да губя части от него. Как мога да задам изображението, поставено за бекграунд да се свие до определени размери?

Това е по-леката част

Сериозният въпрос е за JS, който при клик върху елемента, в който е изображението да го показва в оригиналния размер.

Мъча се целия следобед, с IMG-таг го докарах до някъде, но с бекграунд съм на изходна позиция.

 

[koko5]

дай част от кода:за този елемент и цсс за него да го борим :]

 

[sizif]

Здравей!

Малко е мешена скара, защото само пробвах дали може да се получи преди да си осирам PHP-кода с предаване на излишни стойности. Ще създам нарочни класове в шаблона за размера на таблиците, така че да не се попълват толкова стойности.
С JS-та се справих, но не успявам да задам "умален" бекграунд:

В момента е така:

<script type="text/javascript">
function preview(val){
if(val == '1'){
document.getElementById('rvd_1').style.display="block";
document.getElementById('rvd_2').style.display="none";
}
else{
document.getElementById('rvd_1').style.display="none";
document.getElementById('rvd_2').style.display="block";
}


}
</script>


<TABLE CELLSPACING=0 BORDER=0 CELLPADDING=0 ID="rvd_1" onclick="preview(2)">
<TBODY>
<TR><TD WIDTH=300 HEIGHT=400><IMG SRC="test_pic.jpg" WIDTH=300 HEIGHT=400></TD></TR>
</TBODY></TABLE>


<TABLE CELLSPACING=0 BORDER=0 CELLPADDING=0 ID="rvd_2" onclick="preview(1)" STYLE="display:none">
<TBODY>
<TR><TD STYLE="background-image:url(test_pic.jpg);background-repeat:no-repeat;" WIDTH=600 HEIGHT=800><DIV STYLE="background-image:url(1x1.gif);background-repeat:repeat;width=600px;height:800px">

</TD></TR>
</TBODY></TABLE>


И някои уточнения: снимките се показват динамично, т.е. не мога да използвам абсолютни стойности за позициониране (това, ако ще слагам снимки на слоевете).
Всички размери се попълват динамично от скрипта.

Проблемът ми е как да задам на първата таблица за бекграунд снимката, която в момента е в ИМГ-таг, за да мога да сложа върху нея прозрачния гиф.

 

[koko5]

Здравей :]

задай на IMG name="bla" примерно и след това имаш:

function preview(val){
if(val == 1){
document.getElementById('rvd_1').style.backgroundImage="url("+document.images['bla'].src+")";
document.getElementById('rvd_1').style.display="block";
document.getElementById('rvd_2').style.display="none";
}
else{
document.getElementById('rvd_1').style.display="none";
document.getElementById('rvd_2').style.backgroundImage="url("+document.images['bla'].src+")";
document.getElementById('rvd_2').style.display="block";
}
}

пп:
имаш малка грешка <DIV STYLE="background-image:url(1x1.gif);background-repeat:repeat;width=600px;height:800px">
width:600px;
u
if(val == 1) без кавички според мен
Edit:Вариант 2

................
<img id="image1"..........
....................................
document.getElementById('rvd_1').style.backgroundImage="url("+document.getElementById('image1').src+")";

8)

 

[sizif]

Здравей, koko5!

Мисля, че не си разбрал питането ми. Интересува ме как снимката test_pic.jpg с оригинални размери 600 на 800 рх да се сложи за бекграунд на първата таблица, но с размери 300 на 400рх като не се губят части от снимката (т.е. да се намали).

Интересува ме да бъде бекграунд, защото в момента ползвам ИМГ-таг, а ми трябва да я намалявам като бекграунд.

Благодаря че си обърнал внимание на грешките, но това е код от тестовете. Пробвах доста варианти, в случая това което съм пуснал в предното мнение като код работи, но искам изобщо да няма ИМГ-таг, а навсякъде бекграунд. Това не успях да реша, когато пуснах последния пост.

Мислиш ли, че може да стане с ЦСС?

 

[jooorooo]

<img src="....." onload="if(this.width>300) { this.width='300' }">

нещо такова беше

и още хиляди магии може да направиш от този вид

 

[sizif]

Здарвей, jooorooo!

Благодаря, че обърна внимание на темата, но искам да се освободя точно от IMG-тага, а не да му задавам стойности. Искам изображението да бъде сложено за бекграунд, но с по-малки размери от оригиналните.

 

[jooorooo]

решение в CSS3 http://www.w3.org/TR/css3-background/#background-size

http://www.webmasterkb.com/Uwe/Forum.aspx/javascript/20034/Resizing-background-using-CSS-and-Javascript-according-to-screen

http://newsgroups.derkeiler.com/Archive/Comp/comp.lang.javascript/2006-06/msg01353.html

освен нещо с JS да се мисли като предните линкове

 

[koko5]

Здравей, koko5!

Мисля, че не си разбрал питането ми. Интересува ме как снимката test_pic.jpg с оригинални размери 600 на 800 рх да се сложи за бекграунд на първата таблица, но с размери 300 на 400рх като не се губят части от снимката (т.е. да се намали).

Интересува ме да бъде бекграунд, защото в момента ползвам ИМГ-таг, а ми трябва да я намалявам като бекграунд.
...............................

sizif
аз бих пробвал нещо такова:
background-image:url(bla.php)
file bla.php

<?php
header("Content-type: image/jpeg");
$imsrc = @imagecreatefromjpeg("test_pic.jpg") or die("Cannot Initialize new GD image stream");
$imdest = @imagecreatetruecolor(300,400) or die("Cannot Initialize new GD image stream");
if(imagecopyresized($imdest,$imsrc,0,0,0,0,300,400,imagesx($imsrc),imagesy($imsrc))) imagejpeg($imdest);
imagedestroy($imdest);
?>

8)

 

[mute]

ами май ти дадоха решенията
-цсс3 който мн браузари все още не поддържат
-или с пхп който е доста удачен вариант.

а за да се покаже оригиналния размер ти трябва просот някаква функциика и onClick() с това мисля че ще се справиш

 

[sizif]

Здравейте!

koko5,
mute,

не искам в процеса да ангажирам сървъра. Правя по 11-12 хил импресии дневно от един мижав форум и една система за ЛС, мога да си представя, какво превъртане ще е като пусна галерията.

Не става дума за тумбнейл, за да гоня качество, а за обикновеното показване на снимката в поп-ъп. Искам ако снимката е твърде голяма да може да се свива, както съм го направил с IMG-тага. Затруднението идва от необходимостта да сложа втори слой над нея - прозрачния гиф, за да затрудня максимално копирането (не, че ще излъжа някой, който се е заинатил да свали снимката, но средностатистическият потребител ще се откаже). Очаквам да слагат лични снимки, а някои потребители имат навика да злоупотребяват с чуждите.


jooorooo,

това:

bgimg = document.createElement("bgimg");
bgimg.src = "/images/bg.jpg";
st = {
position:"absolute",
zIndex:"-10",
width:screen.width,
top:"0",
left:"0"
}
for( s in st ){
img.style = st;
}
document.body.appendChild(bgimg);


http://newsgroups.derkeiler.com/Archive/Comp/comp.lang.javascript/2006-06/msg01353.html

...ми се видя много обещаващо, но не успях да го подкарам.

Някаква идея как мога да го сложа за бекграунда на някой <DIV>?