Image Change on Mouseover

[Lana Lister]

I've been attempting to figure out how to make a code that works in the header/footer sections with the <img> code that also works on the bbcode side with the [ img ] code.

Basically, we're doing an egg hunt on the site. When you find an egg, you hover over it to find the point value of such egg.

It's similar to this code pen HERE. But, I can't figure out how to make the image change when you hover over it. Any thoughts or suggestions? It doesn't need anything fancy. Just that it changes pictures when you mouseover... then back to the original image when you don't hover anymore.

[Lynx]

Mar 31, 2019 17:03:24 GMT -8 Lana Lister said:

I've been attempting to figure out how to make a code that works in the header/footer sections with the <img> code that also works on the bbcode side with the [ img ] code.

Basically, we're doing an egg hunt on the site. When you find an egg, you hover over it to find the point value of such egg.

It's similar to this code pen HERE. But, I can't figure out how to make the image change when you hover over it. Any thoughts or suggestions? It doesn't need anything fancy. Just that it changes pictures when you mouseover... then back to the original image when you don't hover anymore.

First, PB has it to where the BBCode image tag looks very similar to the HTML image tag:

HTML image tag:

<img src="URL_to_image" alt="Alternate text if image doesn't show" title="image title that shows up on mouseover">


PB's BBCode image tag:

[img src="URL_to_image" alt="Alternate text if image doesn't show" title="image title that shows up on mouseover"]


All that's different is the <> and []. Knowing this, if all your trying to do is give some text (a point value, in your case), why go through all of that when you can just use the title= attribute? Here's the ode I used and below is the image. Mouse over the image:


[img src="http://storage.proboards.com/6235350/images/EyIvj7JR96wYAOtGXrhv.png" alt="Small diamond image" title="10 points"]


and here's the image from that code:

[Lana Lister]

Apr 1, 2019 6:48:27 GMT -8 Lynx said:

Mar 31, 2019 17:03:24 GMT -8 Lana Lister said:

I've been attempting to figure out how to make a code that works in the header/footer sections with the <img> code that also works on the bbcode side with the [ img ] code.

Basically, we're doing an egg hunt on the site. When you find an egg, you hover over it to find the point value of such egg.

It's similar to this code pen HERE. But, I can't figure out how to make the image change when you hover over it. Any thoughts or suggestions? It doesn't need anything fancy. Just that it changes pictures when you mouseover... then back to the original image when you don't hover anymore.

First, PB has it to where the BBCode image tag looks very similar to the HTML image tag:

HTML image tag:

<img src="URL_to_image" alt="Alternate text if image doesn't show" title="image title that shows up on mouseover">


PB's BBCode image tag:

[img src="URL_to_image" alt="Alternate text if image doesn't show" title="image title that shows up on mouseover"]


All that's different is the <> and []. Knowing this, if all your trying to do is give some text (a point value, in your case), why go through all of that when you can just use the title= attribute? Here's the ode I used and below is the image. Mouse over the image:


[img src="http://storage.proboards.com/6235350/images/EyIvj7JR96wYAOtGXrhv.png" alt="Small diamond image" title="10 points"]


and here's the image from that code:

That's not exactly what I'm looking for. I'm looking for a way to change the image from one image to another image when you hover over it. Not text...

Like, it's THIS image and then it becomes this image when you hover

[Peter]

Place this in your header / footer, or remove the style tags and place into your Stylesheet.

<style>

div[title="Egg-Hunt"] {

    position: relative;
    width: 74px;
    height: 100px;
   
}

div[title="Egg-Hunt"] img {

    position: absolute;
    top: 0;
    left: 0;
   
}

div[title="Egg-Hunt"] img:nth-of-type(1) {

    z-index: 9999;
    transition: opacity .5s linear;
    cursor: pointer;
   
}

div[title="Egg-Hunt"]:hover > img:nth-of-type(1) {

  opacity: 0;
 
}

</style>

Then in your posts you would use this...

[div title="Egg-Hunt"]
    [img src="http://i64.tinypic.com/iz3wcy.jpg"]
    [img src="http://s9.tinypic.com/28tc2ev_th.jpg"]
[/div]

First image is the full egg.  Second image is the egg with the points.

Voilà

[Kitty Katt]

Peter,

Would it be alright if I asked you a couple of questions in regards to your CSS above? I am trying to learn some HTML and CSS (I am a moderator on a Support Forum for a website host) and sometimes HTML and CSS questions come up. Sadly, I find that I am not able to answer those questions as I do not really know HTML and CSS yet, but I would like to learn.

Thank you.

[Peter]

Kitty Katt,

Ask away

[Kitty Katt]

Peter,

1. For the third style:

div[title="Egg-Hunt"] img:nth-of-type(1) {

   z-index: 9999;
   transition: opacity .5s linear;
   cursor: pointer;
 
}

If I am understanding that, that would be for the second image? If so, would the first image technically be img:nth-of-type(0)?

2. In the last style:

div[title="Egg-Hunt"]:hover > img:nth-of-type(1) {

 opacity: 0;

}

Why is a > sign needed in that one, but not in the third one?


Thank you very much for any insight you provide. ==^,.,^==

[Peter]

Apr 13, 2019 7:31:33 GMT -8 Kitty Katt said:

Peter ,

1. For the third style:

div[title="Egg-Hunt"] img:nth-of-type(1) {

 z-index: 9999;
 transition: opacity .5s linear;
 cursor: pointer;

}

If I am understanding that, that would be for the second image? If so, would the first image technically be img:nth-of-type(0)?

Nope. CSS uses 1 based indexing, unlike most other languages such as JavaScript when accessing elements in an array.

So in this case indexing starts at 1. If you were to enter 0 as the index, then it won't find any element in the document.

developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

Apr 13, 2019 7:31:33 GMT -8 Kitty Katt said:

2. In the last style:

div[title="Egg-Hunt"]:hover > img:nth-of-type(1) {

 opacity: 0;

}

Why is a > sign needed in that one, but not in the third one?


Thank you very much for any insight you provide. ==^,.,^==

It will only select images that are descendants of that div we are targeting. We are only interested in any image elements that are a direct descendant.

<div>
  <img ... />
  <img ... />
  <span>
    <img ... />
  </span>
</div
So in the code snippet above, the image in the span will not be effected.

You can omit the > (child combinator) part of that selector, there shouldn't be anymore than 2 image descendants for the solution for what the original poster wanted. But just for completeness I added it to future proof it.

developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator

[Kitty Katt]

Thank you very much for your time and explanation, Peter. It was most helpful. So, please allow me to see if I am able to "pass the test", so to speak. The CSS you posted above (minus the <style> tags) was (I added comments to see if I understand each part correctly):

div[title="Egg-Hunt"] { // Any div with the title of "Egg-Hunt" will be a fixed width and height and placed where the div is in the post. In this case, since we know we will be using just images inside this particular div, we are basically setting the images' width and height.

position: relative;
width: 74px;
height: 100px;

}

div[title="Egg-Hunt"] img { // any image inside of a div with the title of "Egg-Hunt" will be placed, in essence, on top of each other due to the absolute positioning with the images being set with a top and left of 0.

position: absolute;
top: 0;
left: 0;

}

div[title="Egg-Hunt"] img:nth-of-type(1) { // the first image in the div with the title of "Egg-Hunt" will get placed on top of the other images in the div due to the high z-index, given an opacity transition property that lasts .5 seconds (I do not know what the linear does) and makes the cursor a pointer.

z-index: 9999;
transition: opacity .5s linear;
cursor: pointer;

}

div[title="Egg-Hunt"]:hover > img:nth-of-type(1) { // the first image in the div with the title of "Egg-Hunt" will have its opacity changed to 0 when hovered on, but the opacity change takes .5 seconds due to the transition property above (instead of being "instant").

opacity: 0;

}

If I am incorrect in any of those, please let me know. ==^,.,^==

So, if CSS is 1-based, then if I wanted to do something with the second image, that would be referenced with img:nth-of-type(2)?

Again, thank you very much for your time, explanations and patience with me. It is very much appreciated! ==^,.,^==

[Peter]

Kitty Katt You pretty much are there

Highlight #3: linear is the timing function.  In this case we want the speed of the transition to be the same at the start and at the end.

developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function

Highlight #4: Pretty much correct, though just keep note of where the :hover (pseudo-class) is.  In this case we actually apply it to the div and then we get the first image descendant.

[Kitty Katt]

Thank you very much again, Peter! ==^,.,^==

Thank you for the explanation and the link regarding the linear in highlight #3.

So, for highlight #4, it is checking to see if the div has the mouse hover. If it does, then it changes the first image that is a direct descendant of that div. Got it!

I am still curious about this question I had asked though (hidden in with the rest of my text, I had noticed):

So, if CSS is 1-based, then if I wanted to do something with the second image, that would be referenced with img:nth-of-type(2)?

Of course, this does have me thinking if (with changes) something like this could be done with multiple images - but I would be furthering this thread from its original topic, so I will refrain from asking anymore questions.

Again, thank you very, very much for your time and explanations! They have been most helpful! ==^,.,^==

[Peter]

Kitty Katt

Sorry, was in a rush when I replied earlier today.

So yes, second image would be an index of 2 (img:nth-of-type(2)).

[Kitty Katt]

Thank you very much, Peter! ==^,.,^==