/    Sign up×
Community /Pin to ProfileBookmark

Fading images, but not as everyone tries to explane it.

Copy linkTweet thisAlerts:
Mar 24.2005

Hello lads,

It is I……………………………

Hmm, strange nothing, nothing at all…………………..

Was told that’s a big hit in todays d0pe scene

—————————–

Anywayz It is I, cry0, nice to meet you (for everyone who doesn’t know me…. hey wait, that’s impossible)

I’m coding away at a killer site at the moment, and something has been bugging me, my deal is;

I have some pages, on each of these pages are 6 images present (35px – 35px).

Now in my head I have it like this; when you enter the website or a random page, al 6 images PLUS the content part have to fade into the screen, BUT, when going to the next page, it shouldn’t show a new page loading, just the 5 thumbnails PLUS the content part fading out & in with 5 new thumbs PLUS new content.

All this with HTML, JavaScript, CSS whatever, you get the picture.

Appreciate and help and respect for any help/feedback.

Greetz, cry0.

to post a comment
HTML

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@Stephen_PhilbinMar 24.2005 — Use flash.
Copy linkTweet thisAlerts:
@cry0authorMar 24.2005 — [i]Originally posted by Mr Herer [/i]

[B]Use flash. [/B][/QUOTE]

Thought about that, but allways get stuck when merging flash files with the actual html code.
Copy linkTweet thisAlerts:
@the_treeMar 25.2005 — [URL=http://www.alistapart.com/articles/flashsatay/]Flash Satay[/URL] covers how to use flash whilst following standands.
Copy linkTweet thisAlerts:
@cry0authorMar 26.2005 — Sorry flash is really out of the question, not my choice tho, i'm kinda told to not use flash for this project.

Got some idea's about how i want to do this so i'm just gonne post 2 of em here which i got stuck with.

Deal #1;
------------------------------------------------------------



PART ONE

I've put this between my [HEAD] tags.

<!..FADE IN SCRIPT..!>

<SCRIPT LANGUAGE="JavaScript">

function fadeIn()

{

Div0.style.filter="blendTrans(duration=8)";

if (Div0.filters.blendTrans.status != 2)

Div1.style.filter="blendTrans(duration=8)";

if (Div1.filters.blendTrans.status != 2)

Div2.style.filter="blendTrans(duration=8)";

if (Div2.filters.blendTrans.status != 2)

{

Div0.filters.blendTrans.apply();

Div0.style.visibility="visible";

Div0.filters.blendTrans.play();

Div1.filters.blendTrans.apply();

Div1.style.visibility="visible";

Div1.filters.blendTrans.play();

Div2.filters.blendTrans.apply();

Div2.style.visibility="visible";

Div2.filters.blendTrans.play();

}

}

</SCRIPT>
------------------------------------------------------------



PART TWO

onLoad event in my <BODY> tag.

<BODY onLoad="fadeIn()">
------------------------------------------------------------



PART THREE

Two DIV sections with there own id. Both DIV sections contain 3 images, which all pop up uber nice together with a content field.

<div id="Div0" STYLE="visibility:hidden" class="leftimagebox">

<img class="imageinbox" src="images/plaatje01.png" width="135" height="135" border="0" alt=""><br>

<img class="imageinbox" src="images/plaatje02.png" width="135" height="135" border="0" alt=""><br>

<img class="imageinbox" src="images/plaatje03.png" width="135" height="135" border="0" alt=""><br>

</div>

<div id="Div1" STYLE="visibility:hidden" class="rightimagebox">

<img class="imageinbox" src="images/plaatje04.png" width="135" height="135" border="0" alt=""><br>

<img class="imageinbox" src="images/plaatje05.png" width="135" height="135" border="0" alt=""><br>

<img class="imageinbox" src="images/plaatje06.png" width="135" height="135" border="0" alt=""><br>

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



PART FOUR

<div id="Div2" STYLE="visibility:hidden" class="contentbox">

<table>

<tr>

<td height="415" width="65">

<IMG SRC="images/leftcontentboximage.png">

</td>

<td VALIGN="top" height="415" width="365">

Content field

</td>

</tr>

</table>

</div>

Above code works almost perfectly, the onLoad event let's my 6 images and a content field pop up real nice. BUT when I surf to another page, i would like all 6 images plus a content field to merge from previous page to next page :-]
------------------------------------------------------------



Deal #2;

PART ONE

Not worth mentioning, only got one image to fade in, a shame though, since this script should have worked for multi-browsers, and since the first above script only mainly works for IE......
------------------------------------------------------------




Any thoughts would help, thnx in advance.

Greetz, cry0.
Copy linkTweet thisAlerts:
@Stephen_PhilbinMar 26.2005 — Without some fairly heavy duty server side scripting and session tracking so you can spit out great cludging javascripts that have been written dynamically on the server side, I don't think you can do it. Slap your client and heavily charge them for telling you to build a page and telling you not to use the tools needed to meet their requirements in a sensible way.
×

Success!

Help @cry0 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.7,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...