如何在JavaScript中为图片添加工具提示（基于条件）？

Question

I've found the line in a PHP file that changes the actual image depending on whether the support line is available or not, but it has no tooltip and can be confusing. Can someone please help?

This is the line that works:

<div id="ciFeSX" style="z-index:100;position:absolute"></div>    
<div id="scFeSX" style="display:inline"></div><div id="sdFeSX" style="display:none"> 
</div>

<script type="text/javascript">
  var seFeSX=document.createElement("script");
  seFeSX.type="text/javascript";
  var seFeSXs=   
           (location.protocol.indexOf("https")==0?"https":"http")+"://image.mysupport.com/js/support/safe-standard.js?ps_h=FeSX&ps_t="+new Date().getTime()+"&online-image={$images_url}livechat_online.png&offline-image={$images_url}livechat_offline.png&ID={$store_id}";

setTimeout("seFeSX.src=seFeSXs;  
document.getElementById('sdFeSX').appendChild(seFeSX)",1)
</script>

<noscript>
<div style="padding:9px;">
<a target="_blank" style="color:#fff;  font-size:20px;"href="http://www.providesupport.com?messenger=propersupport"></a>
</div>
</noscript>

I tried to modify this:

 &online-image={$images_url}livechat_online.png

with

&online-image={$images_url}livechat_online.png+image.setAttribute("alt","Live Chat is current ONLINE")

and then do the same for the offline, but it broke the code.

I'm still learning, so please forgive my ignorance.

Answer 1

You won't be able to just add it into the URL string and have it work. You need to put additional javascript between script tags.

What you could consider doing is to use that variable $images_url. Apparently, depending on the offline/online status, that is the variable that changes. You haven't included enough code to let us know exactly how, since I don't see that variable being set or manipulated at all.

Another thing - in order to display the toolip, you need to change the "title" attribute, not Alt. However, you need to use a selector to select the right image. This is one way, by selecting the image's ID.

document.getElementById('sdFeSX').setAttribute("title","Live Chat is currently ONLINE");

It seems like the script that is there calls the image by generating a javascript within the

<div id='sdFeSX'></div> 

Therefore, in order to display a title tag, you need to change the attribute of that div.

Of course, you will need some sort of "if/else" statement in javascript. Something along the lines of

if($images_url == 'something'){
document.getElementById('sdFeSX').setAttribute("title","Live Chat is currently ONLINE");
} 

That way, if the variable $images_url is set to the online image, your script will activate the title tag. Just remember to put the javascript in the script tags! You can add it to the end of the script already there if you'd like.