Mouse Over Image Effect

[bubblegum]

You have a button, you mouse over, it lights up or does whatever else.

i've been googling, and trying at least seven different attempts at getting this to work.  It's not, and i don't understand why,  i've tried different ways of laying it out and i'm just fed up at this point, because it seems like it should be so simple!  i've even tried looking back to find the code in past threads here (which i did) but couldnt get any to work either.  Guess it comes down to ME being broken and not the code.

Please help.

<ul class="controls"><li><a href="$[create_thread_button.href]"><img src='//storage2.proboards.com/7255414/images/jOkPyGvEVNXGrbjzzoDi.png' onmouseover="//storage2.proboards.com/7255414/images/DFBXHfcIcVvfNXb0Euee.png'" onmouseout="//storage2.proboards.com/7255414/images/jOkPyGvEVNXGrbjzzoDi.png'" border="0"></a></li></ul>

[Todge]

Jan 23, 2022 8:14:07 GMT -8 bubblegum said:

You have a button, you mouse over, it lights up or does whatever else.

i've been googling, and trying at least seven different attempts at getting this to work.  It's not, and i don't understand why,  i've tried different ways of laying it out and i'm just fed up at this point, because it seems like it should be so simple!  i've even tried looking back to find the code in past threads here (which i did) but couldnt get any to work either.  Guess it comes down to ME being broken and not the code.

Please help.

<ul class="controls"><li><a href="$[create_thread_button.href]"><img src='//storage2.proboards.com/7255414/images/jOkPyGvEVNXGrbjzzoDi.png' onmouseover="//storage2.proboards.com/7255414/images/DFBXHfcIcVvfNXb0Euee.png'" onmouseout="//storage2.proboards.com/7255414/images/jOkPyGvEVNXGrbjzzoDi.png'" border="0"></a></li></ul>

Try this in your CSS Stylesheet..

.container > .title-bar > .controls li a:hover {
   background-image: url('URL OF IMAGE HERE');
}

[Kami]

Also, some editing for the coding you sent me / you posted in the OP.

Code from PM:

- missing the this.src portion of the onmouseover section, and corresponding quotes.

Code from your OP:

- missing the this.src portion of both the onmouseover and onmouseout sections, and corresponding quotes.

And as a teachable moment, Todge's solution is better than using onmouseover / onmouseout in this case because a) CSS is cached, whereas javascript is loaded after the forum is loaded, meaning the effect will be persistent / not have to wait for the forum to fully load before activating; and b) because your "onmouseout" image is the same as your base image, in which case all you need is to change the hover state which is accomplishable by CSS.

[bubblegum]

Thank you Todge and Kami for replying <3

This is what happens when i try Todge's suggestion. The mouseover appears behind the original and in a different position, and doubles (see on the right there)



Kami:
yeah i was trying more codes since the PM lol i was trying so hard to get it to work without posting.

As for the missing things, i was going by the exact code in the examples that were given, and just editing the image code. i cant win it seems.

[Kami]

Jan 23, 2022 9:57:51 GMT -8 bubblegum said:

Thank you Todge and Kami for replying  <3

This is what happens when i try Todge's suggestion. The mouseover appears behind the original and in a different position, and doubles (see on the right there)



Kami:
yeah i was trying more codes since the PM lol i was trying so hard to get it to work without posting.

As for the missing things, i was going by the exact code in the examples that were given, and just editing the image code. i cant win it seems.

So, this is where your knowledge from before comes into play; previously we discussed adding margins to nudge pieces into the correct place. Similarly here, you would want to use the margin property in addition to what Todge provided.

.container > .title-bar > .controls li a:hover {
    background-image: url('URL OF IMAGE HERE');

    margin-top: -10px;

    margin-left: -5px;
}

You'll notice I used negative margins instead of positive margins this time; I could use the opposite direction (margin-bottom and margin-right respectively), but this is a personal preference. Adjust the -10 and -5 as before until it lines up over the original image (this will be a bit of trial and error). When dealing with negative margins, the larger the number, the more you pull the element toward the direction indicated, as opposed to moving it away like positive margins.

Also, I just want to nip the bit I highlighted in the bud; it is not a matter of "winning" or being able to immediately figure stuff out. If that's what you're expecting for yourself, then you're setting yourself up for failure. I mean this in the kindest way possible: you've done well figuring stuff out on your own but you really shouldn't expect that will be successful 100% of the time. Not because of you but because that's how learning new skills works, especially when it comes to coding.

The main thing about learning any programming or web development language or syntax is trial and error. What you are seeing from the folks helping you is literally a culmination of years upon years upon years of experience, not just in web development but with ProBoards specifically. Even then, we still make mistakes! I do a lot of trial and error and googling, and STILL mess up, and that's after doing this for ~20 years.

To expect yourself to get this perfectly after a couple of attempts is really not realistic, and a little unkind to yourself and your learning process. Please be gentle with yourself and set your expectations accordingly!

[bubblegum]

Thank you for your kind words, Kami. You're right, it's easy to forget you guys have been at this so long.

The code you provided, wasn't entirely helpful. Yes, it was nudging the highlight image around, however as it did that it also skewed the other main image around, and then the second clipping of the highlight image is still there, and the highlight image is supposed to appear OVER the main image on mouse over and it hasnt ever done that.

The title in the bar is also dancing around as well now, and the stuff in the cells below the title bar. It's a mess lol

i think this is a situation where my expectations outweigh what is possible in this case. Or at the very least, more trouble than it is worth.

[Kami]

Jan 23, 2022 11:20:30 GMT -8 bubblegum said:

Thank you for your kind words, Kami. You're right, it's easy to forget you guys have been at this so long.

The code you provided, wasn't entirely helpful. Yes, it was nudging the highlight image around, however as it did that it also skewed the other main image around, and then the second clipping of the highlight image is still there, and the highlight image is supposed to appear OVER the main image on mouse over and it hasnt ever done that.

The title in the bar is also dancing around as well now, and the stuff in the cells below the title bar. It's a mess lol

i think this is a situation where my expectations outweigh what is possible in this case. Or at the very least, more trouble than it is worth.

:X don't be so negative. Again, this is about trial and error. If one suggestion doesn't work, there's almost always another one. Give me a few minutes and I'll take a closer look.

[Kami]

Try this

/* Create Thread Button Rollover */
.container > .title-bar > .controls li a:hover {
    background-image: url('IMAGE URL HERE');
    background-repeat: no-repeat;
    background-position-x: 10px;
    background-height: 100%;
    height: 33px;
}

.container > .title-bar > .controls li a img:hover {
    opacity: 0;
}
/* Create Thread Button Rollover (END) */

It might need some adjustments, but see if this at least functions in a way you like.

[bubblegum]

Thank you again for trying. Still not working properly, even with playing with the background position.

[Kami]

Jan 23, 2022 14:05:01 GMT -8 bubblegum said:

Thank you again for trying. Still not working properly, even with playing with the background position.

No worries! Since I'm not actively changing your forum and am using my test forum, there's bound to be some differences. 

Out of curiosity, do you remove the CSS when it doesn't work? If you do, could you please leave it in? It is impossible to make accurate adjustments based on how the CSS reacts on your forum if it can't be seen in action. I am not currently seeing the above CSS applied, so I can only assume that it was removed.

Please put the above CSS back in and let me take a look at it. (Also, for future note, "not working" isn't particularly helpful in triaging the issue either -- description like you were doing before is much more useful!)