/    Sign up×
Community /Pin to ProfileBookmark

img rotating

?

my code works fine. Except that the last image while rotating the set, isn’t hidden, the overlapping part is always laid over the rest ..

Any idea ?

[code]

function rotate() {
alert(‘hello world’);

var len = currentPositions.length;
var link1 = currentPositions[0];
var i=0;
for (i=0; i< currentPositions.length-1; i++){
var changed = (i+1)%len;
currentPositions[i] = currentPositions[changed];

}
currentPositions[i] = link1;
var j = 0;
for(i=0, j= currentPositions.length-1; i< currentPositions.length; i++) {
var currentLink = document.getElementById(currentPositions[i]);
currentLink.setAttribute(“style”,”position:absolute;LEFT:” + leftPosition[i] +”;TOP:”+ topPosition[i]);
var currentImg = currentLink.getElementsByTagName(‘img’)[0];
currentImg.setAttribute(“width”, widthArray[i]);
currentImg.setAttribute(“height”,heightArray[i]);

}
}
[/code]

to post a comment
JavaScript

4 Comments(s)

Copy linkTweet thisAlerts:
@w3b20authorAug 20.2010 — my html looks like this -

<i>
</i>.......

&lt;div&gt;
&lt;a id="link1" href="./images/ithaka.jpg" &gt;
&lt;img id="placeholder1" src="./images/ithaka.jpg" alt="my image gallery"
width="100" height="100"/&gt;&lt;/a&gt;
&lt;a id="link2" href="./images/ithaka.jpg" &gt;
&lt;img id="placeholder2" src="./images/test.jpg" alt="my image gallery"
width="100" height="100"/&gt;&lt;/a&gt;
&lt;a id="link3" href="./images/ithaka.jpg" &gt;
&lt;img id="placeholder3" src="./images/example.jpg" alt="my image gallery"
width="100" height="100"/&gt;&lt;/a&gt;
&lt;a id="link4" href="./images/ithaka.jpg" &gt;
&lt;img id="placeholder4" src="./images/left.jpg" alt="my image gallery"
width="100" height="100" /&gt;&lt;/a&gt;
&lt;a id="link5" href="./images/ithaka.jpg" &gt;
&lt;img id="placeholder5" src="./images/nature.jpg" alt="my image gallery"
width="100" height="100" /&gt;&lt;/a&gt;
&lt;/div&gt;

&lt;a href="#" onclick="rotate();"&gt;Click here to rotate &lt;/a&gt;

.......


Resizing and positioning is fine. Just that the part of the last img, (in link5) doesn't get hidden when overlapping with other imgs.
Copy linkTweet thisAlerts:
@tirnaAug 20.2010 — :confused:

Any idea ?

[/quote]

Absolutely none since you haven't posted all your code :p

Where is currentPositions defined?

I skipped school the day they taught mind reading ?
Copy linkTweet thisAlerts:
@w3b20authorAug 20.2010 — ok, I figured out the problem. It seems I have to create new <a> tags everytime and delete existing childNodes of the <div>

But still the transitions aren't smooth. It is too coarse. I need some kind of effect.

currentpositions basically has all the ids of the <a> tags.
×

Success!

Help @w3b20 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.19,
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,
)...