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