MEGOLDVA javascript css divben képEK átlátszósága

Internet: PHP, CGI, stb.

Üdv

Az alábbi problémában lenne segítségre szükségem:

Adott:
- egy div amelyben van 4 kép.
- 4 kép, mindegyik más, mindnek más az id-je
- 4 link amik a diven kívül helyezkednek el és az első link utal (névben) az első képre, a 2. link a 2. képre stb...

A cél:
Ha a User onmouseover-eli a linket a képek közül a hozzá tartozó maradjon teljesen átlátszatlan, a többi legyen félig áttetsző.
Ha onmouseout-olja akkor mind legyen átlátszatlan.

Biztos nem bonyolult, de nekem most valahogy nem akar összejönni.

Az alap problémám hogy a divben lévő img-kre valahogy nem tudok egyszerre hivatkozni és módosítani azokat. :(

Köszönöm a segítséget

  • 1510 megtekintés

( apal v | 2010. 10. 22., p – 14:15 )

sima kepcsere egy felig attetszo" png-re? vagyis forditva, onmouseover-re lecsereli az off (felig attetszo") kepet egy simara?

javaszkript: 


    img1off= new Image
    img1off.src = "../path/img_1_transparent.png"
    img1on= new Image
    img1on.src = "../path/img_1_normal.png"

(mindez 4x) 


function image_on (i) 
 {  if (document.images) 
        eval ("document[i].src = " + i + "on.src");

 }
function image_off (i) 
 {  if (document.images) 
        eval ("document[i].src = " + i + "off.src");
 }

html: 


<img src="../path/img_1_transparent.png" name="img1">
<a href="/path/to/link/1" onmouseover="image_on('img1')" onmouseout="image_off('img1')"> ... </a>

szinten 4x.
(a linket itt hasznalhatod kulso linkkent is, vagy kozeszurhatod maga't az img-t is).

( uid_194 | 2010. 10. 22., p – 14:18 )

Adj egy id-t a divnek, es utana egyszeru a benne levo imgkre hivatkozni: div#id img { blah }, az epp aktualis img meg div#id img#imgid { blah }. Utobbi felul fogja utni az elobbit, es minden szep es jo.

jQuery-vel ez kb igy nezne ki:


$("a.hovermebaby").hover (function () {
var imgid=blah; /* itt kihalaszod $(this)-bol amit kell, ez lesz az img id
$("div#id img").css ({ opacity: 0.5 });
$("div#id img#"+imgid).css ({ opacity: 1 });
}, function () {
var imgid=blah; /* itt kihalaszod $(this)-bol amit kell, ez lesz az img id
$("div#id img#"+imgid).css ({ opacity: 0.5 });
});

( turdus | 2010. 10. 22., p – 14:32 )

Szerintem meg adj egy spec class-t a képeknek, és akkor egyszerűen végig tudsz menni rajtuk (mondjuk class="galerypics"):

function fadeimages(current)
{
var i;
for(i=0;i<document.images.length;i++){
if(document.images[i].getAttribute("class")=="galerypics"){
//ha ez a kivalasztott kep, akkor 100%, egyebkent 50%
var opacity=(documents.images[i].getAttribute("id")==current?100:50);
//ie
document.images[i].style.filter="Alpha(Opacity="+opacity+")";
//ff
document.images[i].style.MozOpacity=opacity/100;
}
}

Használata onmouseover="fadeimages('img1');", illetve onmouseout="faddeimages();". Nem kell ide jQuery meg hasonló böszme jseffect libraryk.

Köszönöm a segítséget (mindenkinek)

turdus a Te megoldásodat fogom használni (csak a var opacity=(documentS -et javítsd ki légyszi, mert először nekem sem akart működni :) ). Nagyon köszönöm.

Nem akartam jQuery-t, és nem akartam minden változtatásnál újra beírogatni a képek neveit a javascriptbe (is).
De így nem kell ezzel vesződnöm.

kösz HUP