Hey! I don't want to bother you, but do you know if there's a way to make your HP bar click through to a page? And I can't figure out how to add a title (when you hover over them) like yours that says "Health points: xx%". Your hp bar generator is pretty cool by the way :)
It does, however, take a bit of attention to pull off, since itâs something that usually has to be custom done for any theme and any hp bar.
First: make sure you have jQuery in your blog theme. This part should be as easy as searching for âjqueryâ in your theme code, really. If thereâs any section that looks even vaguely like this, with a jquery.js or jquery.min.js on the end:
section will do. If youâre like âwhat the hell is a sectionâ then I suggest you search in the code for ââ or â<style type=âtext/cssâ>â and create a few new lines right above that, and prepare to stick it there.<p>For example, right here.<figure data-orig-width="633" data-orig-height="241" class="tmblr-full"><img src="https://40.media.tumblr.com/302f1ab8ad560f1d444f5d9e453dda7a/tumblr_inline_nurtzqHEDm1qequlf_540.png" alt="image" data-orig-width="633" data-orig-height="241"><p><b>Third: Paste this sucker in.<blockquote><p><script language=âjavascriptâ><br>$(document).ready(function() {<br>   $(â#hpbarâ).attr(âtitleâ, âHealth Points: â + <br>   (Math.round($(â#hpâ).css(âwidthâ).replace(âpxâ,ââ)/250*100)) + â%â  );<br>});<p>Okay, almost done. But we do have to probably tweak this a little, so thereâs one more step.<p><b>Fourth: Just gotta tailor that javascript to your specific hp bar! If you didnât change the âBar Widthâ or âLabelâ options when you generated your bar, you can actually skip this part, because the code above is set to the default, anyway. But, if you did change the bar width or label:<p>Where it says â#hpbarâ and â#hpâ make sure those parts line up with your hp bar. For example, letâs say I made a bar that says MP and not HP. In that case, I should replace â#hpbarâ with â#mpbarâ and â#hpâ with â#mpâ. With me so far? It would look like this:<blockquote><p><script language=âjavascriptâ><br>$(document).ready(function() {<br>  $(â<b>#mpbarâ).attr(âtitleâ, âHealth Points: â + <br>  (Math.round($(â<b>#mpâ).css(âwidthâ).replace(âpxâ,ââ)/250*100)) + â%â  );<br>});<br><p>You may also want to adjust the message that appears when you hover over the bar. You can pretty much change it to anything you want. For an MP bar, I would change it to Magical Power maybe, but you could change it to anything, really, as long as thereâs no quotation/special marks in it (which could mess with the code).<blockquote><p><script language=âjavascriptâ><br>$(document).ready(function() {<br>  $(â<b>#mpbarâ).attr(âtitleâ, â<b>Magical Power: â + <br>  (Math.round($(â<b>#mpâ).css(âwidthâ).replace(âpxâ,ââ)/250*100)) + â%â  );<br>}); <br><p>Then, check the total width of your bar. It should be the number you put in the âBar Widthâ box when generating your bar, or, in the hp bar code, this number bolded here:<blockquote><p>#mpbar {<br> height: 20px;<br> width: <b>400px;<p>If that number is not 250, then change the 4th line from the javascript to match. For example, if my bar was 400px long, I would change it to:<blockquote><p>(Math.round($(â#mpâ).css(âwidthâ).replace(âpxâ,ââ)/<b>400*100)) + â%â  ); <p><b>Fifth: The above steps should set you up with a hover, but if you want it to look pretty, and you have style-my-tooltips on your blog theme, youâll need to tweak style-my-tooltips slightly. <p>Search for this, or something like it, in your theme code:<blockquote><p>$(âa[title]â).style_my_tooltips({<br>tip_follows_cursor:true,<br>tip_delay_time:0,<br>tip_fade_speed:300,<br>attribute:âtitleâ<br>});<p>And add this part.<blockquote><p>$(âa[title]<b>, div[title]â).style_my_tooltips({<br>tip_follows_cursor:true,<br>tip_delay_time:0,<br>tip_fade_speed:300,<br>attribute:âtitleâ<br>});<p>There you go! All done! When done correctly, this should automatically generate a pretty hover-over title on your HP bar. <p>And if it doesnât, yell at me to help some more. :)<p>EDIT: OOPS FORGOT YOUR FIRST QUESTIONâŠ<p>Thatâs way easier though. See the part of your code that looks like this?<blockquote><p><div id=âhpbarâ><br> <div id=âhpâ><br><p>Just add this.<blockquote><p><b><a href=â[YOUR LINK HERE]â><br> <div id=âhpbarâ><br> <div id=âhpâ><br> <br><b>   <br><p>Easy as pie.
