I am using a dynamic jquery carousel to show thumbnail images in the home page....The carousel is working fine...and i want to add a tooltip to each image....for this i am using jquery tooltip....on hover tooltip should display the original image,uploaded by and so on...
The javascript that adds the tooltip to each image is as follows...
function mycarousel_getItemHTML(url)
{
var url= url.split(",");
return '<a href="'+url[4]+'" onmouseover="Tip(\'<img src=\''+url[5]+'\'></img><br/><b>'+url[1]+'</b><br />Category:'+url[6]+'<br/>Views:'+url[2]+'<br/>Uploaded by:'+url[3]+'\')" onmouseout="UnTip()"><img src="' + url[0] + '" width="75" height="75" alt="" /></a>';
};
url[5]=original img src
url[1]=title
url[6]=category name
url[2]=no of views
url[3]=uploaded by
url[0]=thumbnail img source
the above javascript gives me the following error
missing ) after argument list
how can i escape single and double quote properly...Please help me... -
I think the onmouseover
portion is wrong, and you want:
onmouseover="Tip(\'<img src=\\\''+url[5]+'\\\' /><br/><b>'+url[1]+'</b><br />Category:'+url[6]+'<br/>Views:'+url[2]+'<br/>Uploaded by:'+url[3]+'\')"
Let me know if that doesn't work - my head's hurting from trying to be a JavaScript interpreter. I think that's on the right lines though.
ps I fixed your <img>
tag - I think in general <img>
tags should be self-closing <img... />
, not <img...></img>
.
Assuming the HTML "
entity gets interpreted properly (and reformatting so people can see what's going on.):
function mycarousel_getItemHTML(url)
{
var url= url.split(",");
// wrapping attributes in double-quotes, so use double-quote
// entity within attribute values:
return '<a href="' + url[4] + '" ' +
'onmouseover="Tip(\'<img src="' + url[5]+'"/><br/>' +
'<b>' + url[1] + '</b><br />' +
'Category:' + url[6] + '<br/>' +
'Views:' + url[2] + '<br/>' +
'Uploaded by:' + url[3] + '\')" ' +
'onmouseout="UnTip()">';
};
Note: you should probably entity-encode all the <
to <
inside the onmouseover attribute too. That might leave less scope for browsers to bork the tooltip
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.