[RESOLVED] DOM Manipulation -> need little advice

This site is best viewed in a modern browser with JavaScript enabled.

[RESOLVED] DOM Manipulation -> need little advice

iosystems

Hello,

I'm currently working on some code I need to manipulate. Unfortunately I'm not really familiar with javascript so I ask you for a little help.
The code is for use on eBay.

This is the code I use:

<div id="slider">
            	<a href="$#Link.Picture:1#$" id="bild1" class="MagicZoomPlus" style="$#Sichtbarkeit.Picture:1#$">$#Picture.1:600x450#$</a>
            	<a href="$#Link.Picture:2#$" id="bild2" class="MagicZoomPlus" style="$#Sichtbarkeit.Picture:2#$">$#Picture.2:600x450#$</a>
            	<a href="$#Link.Picture:3#$" id="bild3" class="MagicZoomPlus" style="$#Sichtbarkeit.Picture:3#$">$#Picture.3:600x450#$</a>
            	<a href="$#Link.Picture:4#$" id="bild4" class="MagicZoomPlus" style="$#Sichtbarkeit.Picture:4#$">$#Picture.4:600x450#$</a>
            	<a href="$#Link.Picture:5#$" id="bild5" class="MagicZoomPlus" style="$#Sichtbarkeit.Picture:5#$">$#Picture.5:600x450#$</a>
            	<a href="$#Link.Picture:6#$" id="bild6" class="MagicZoomPlus" style="$#Sichtbarkeit.Picture:6#$">$#Picture.6:600x450#$</a>
            	<a href="$#Link.Picture:7#$" id="bild7" class="MagicZoomPlus" style="$#Sichtbarkeit.Picture:7#$">$#Picture.7:600x450#$</a>
            	<a href="$#Link.Picture:8#$" id="bild8" class="MagicZoomPlus" style="$#Sichtbarkeit.Picture:8#$">$#Picture.8:600x450#$</a>    

</div>

the $#anything#$ in the code is filled automatically by an inventory management system.

$#Link.Picture:X#$ ist filled with link to a Picture (http://example.example.de/example/pictures/example_1.jpg) in full resoulution (in my case 1200*900px)

$#Sichtbarkeit.Picture:X#$ sets "display:none" if the corresponding $#Picture.X:600x450#$ is not set. If it is set $#Sichtbarkeit.Picture:X#$ does nothing

$#Picture.X:600x450#$ creates IMG-Tag with link to PictureX resized to 600*450 px including the ALT-Attribute (<img src="http://example.example.de/example/pictures/example_1_resized.jpg" alt="something i can not change">

So this is the Code i get when - for example - 4 pictures are set in my inventory management system:

<div id="slider">
<a href="http://example.example.de/example/pictures/example_1.jpg" id="bild1" class="MagicZoomPlus" style=""><img src="http://example.example.de/example/pictures/example_1_resized.jpg" alt="something i can not change"></a>
<a href="http://example.example.de/example/pictures/example_2.jpg" id="bild2" class="MagicZoomPlus" style=""><img src="http://example.example.de/example/pictures/example_2_resized.jpg" alt="something i can not change"></a>
<a href="http://example.example.de/example/pictures/example_3.jpg" id="bild3" class="MagicZoomPlus" style=""><img src="http://example.example.de/example/pictures/example_3_resized.jpg" alt="something i can not change"></a>
<a href="http://example.example.de/example/pictures/example_4.jpg" id="bild4" class="MagicZoomPlus" style=""><img src="http://example.example.de/example/pictures/example_4_resized.jpg" alt="something i can not change"></a>
<a href="" id="bild5" class="MagicZoomPlus" style="display:none;"></a>
<a href="" id="bild6" class="MagicZoomPlus" style="display:none;"></a>
<a href="" id="bild7" class="MagicZoomPlus" style="display:none;"></a>
<a href="" id="bild8" class="MagicZoomPlus" style="display:none;"></a>
</div>

The Problems are:

As you can see ALT-Attribute of the Pictures is automatically set to "something i can not change". It is the same attribute for all pictures.
If i use - for example - only 4 pictures instead of the 8 which are maximum possible i get 4 empty A-Tags.

I have to set ALT-Attribute to "#htmlcaption1" for picture 1, "#htmlcaption2" for picture 2 and so an

AND

I have to completely remove the empty A-Tags if I use less than 8 pictures.

Unfortunately I can not give ID to IMG-Tag because they are automatically created by $#Picture.X:600x450#$

BUT I gave IDs to the parent A-Tag of the IMG-Tag so I think it can be changed by setting Attribute to child of A-Tag

AND

complete A-Tag can be removed if there is no IMG-Tag inside

This should be managed by a script for DOM manipulation.

Can anybody help me there because I am not very familiar with Javascript...

P.S. I would also like to make a little donation for this

Thanks in advance

iosystems

Sorry I didn't find a possibility to edit previous post.

So this is how it actually should be (removed empty A-Tags and edited ALT-Attribute by Hand after uploaded to ebay)

http://cgi.ebay.de/ws/eBayISAPI.dll?ViewItem&item=181123995607

quasiyoke

This can be modified as you need. Search by topics: jQuery, onLoad

iosystems

Thank you for reply

unfortunately I cannot do what I need with your script; because of limitations on ebay it has also to be pure javascript without any frameworks.

For information the "example_X.jpg" and "example_X_resized.jpg" in the code are not neccessarily numbered 1 to 8, this is instead random which i cannot influence, i can not even influence the link itself because it is set automatically by variables I don't know and they are NOT on my own server. This means links can be anything. But it should not matter what links exactly are because I gave IDs to the A-Tags.

if you want to see the expected result you can go to

cgi.ebay.de/ws/eBayISAPI.dll?ViewItem&item=181123995607

I edited ALT-Tags and deleted unused A-Tags by hand there after uploading.

I thought a bit about it and it should be quite easy to realize, I'm just not able to write script on my own...

expected Solution:

I need a script with a loop counting 0 to 7 or 1 to 8 (because there are 8 possible pictures)

Script calls element by ID "bild1" first and checks if Attribute style="display:none" is set.

If so script deletes the current A-Tag (bild1)
If not script sets ALT-Attribute of first child (IMG-Tag) to "#htmlcaption1"

script goes to next loop, counter is +1

Script calls element by ID "bild2" and checks if Attribute style="display:none" is set.

If so script deletes the current A-Tag (bild2)
If not script sets ALT-Attribute of first child (IMG-Tag) to "#htmlcaption2"

...
and so on till loop count is 7 (or 8)
...

after doing so script is finished and everything is as it should be

How do you think about it?

iosystems

Thank you for reply

unfortunately I cannot do what I need with your script; because of limitations on ebay it has also to be pure javascript without any frameworks.

I thought a bit about it and it should be quite easy to realize, I'm just not able to write script on my own...

expected Solution:

I need a script with a loop counting 0 to 7 or 1 to 8 (because there are 8 possible pictures)

Script calls element by ID "bild1" first and checks if Attribute style="display:none" is set.

If so script deletes the current A-Tag (bild1)
If not script sets ALT-Attribute of first child (IMG-Tag) to "#htmlcaption1"

script goes to next loop, counter is +1

Script calls element by ID "bild2" and checks if Attribute style="display:none" is set.

If so script deletes the current A-Tag (bild2)
If not script sets ALT-Attribute of first child (IMG-Tag) to "#htmlcaption2"

...
and so on till loop count is 7 (or 8)
...

after doing so script is finished and everything is as it should be

How do you think about it?

iosystems

Here is the solution, pretty easy for someone who is familiar with javascript i think. In fact this is the first JS i wrote
Works very well on ebay...

<script>
for (var i=1; i<9; i++) {
var bildnummer = 'bild'+i;
if (document.getElementById(bildnummer).style.display == 'none')
{
document.getElementById(bildnummer).parentNode.removeChild(document.getElementById(bildnummer))
}
else
{
document.getElementById(bildnummer).firstChild.setAttribute('alt', '#htmlcaption' + i);
}
}
</script>