CODEWITHSUNDEEP
javascriptjqueryhtml
zppinto
zppinto

Reputation: 297

Create "title" attribute on <a> tag

Part of my HTML Code is created according to my javascript code, more precisely the attributes of tag <a> (href and title).
I'm trying to create a HTML title inside <a> so I can have the mouseover effect, and present the Title and Description.
According to my javascript code, myTitle array will have the Title for every image, and will be displayed according to its position...

HTML CODE

<a href="../test/top.php?title=sample1.mp4" title="Título 1 Descript 1">
    <img style="z-index: 20; position: absolute; left: 365px; top: 63px; width: 189px;" src="spiral/sample1.jpg">
</a>
<a href="../test/top.php?title=sample2.mp4" title="Título 1 Descript 1" >
    <img style="z-index: 17; position: absolute; left: 674px; top: 60px; width: 155px;" src="spiral/sample2.jpg">
</a>

JAVASCRIPT CODE

var myTitle = ["Title 1", "Title 2", "Title 3"];
var myDescr = ["Desc 1", "Desc 2", "Desc 3"];

$('img').wrap(function(){
return $('<a>').attr({
    href:
    '../test/top.php?title=' + this.src, title: myTitle[0] + "\n" + myDescr[0]
    })
});

The problem now, is that I can't create a for cycle inside the attr and so I can't print myTitle[0], myTitle[1] and myTitle[2] for every image...

Any ideas you can I bypass this problem?

Note that the myTitle an myDescr arrays are variable, and IMAGES CAN BE REPEATED...

Upvotes: 1

Views: 165

Answers (2)

PSL
PSL

Reputation: 123739

You can do it this way, using the index argument in wrap callback function.

$('img').wrap(function (i) {

    return $('<a>').attr({
        href:
            '../test/top.php?title=' + this.src,
        title: myTitle[i] + "\n" + myDescr[i]
    })
});

Demo

.wrap( function(index) )

If you want the title/desc to repeat through for repeating images try this way.

var myTitle = ["Title 1", "Title 2", "Title 3"];
var myDescr = ["Desc 1", "Desc 2", "Desc 3"];

$('img').wrap(function (i) {
    var title = myTitle.shift(); //Get the top
    myTitle.push(title); //push back for cycle
    var descr = myDescr.shift();//Get the top
    myDescr.push(descr);//push back for cycle

    return $('<a>').attr({
        href:
            '../test/top.php?title=' + this.src,
        title: title + "\n" + descr
    })
});

Demo

Upvotes: 3

landons
landons

Reputation: 9547

How about using .each()?

$('img').each(function(i) {
    $(this).wrap(function(){
        return $('<a>').attr({
            href: '../test/top.php?title=' + this.src, title: myTitle[i] + "\n" + myDescr[i]
        });
    });
});

Upvotes: 3

Related Questions