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.
