Random hover on page load

[yann.kuto]

Hi, I’m a beginner working on my personal website and on the homepage I have an image logo (logo6.jpg) with a hover image. I would like to achieve that on each page load the hover image change randomly. So the base logo image(logo6.jpg) is always the same one and only the hover image change.. now I have like 3 different ones (circles.jpeg, stars.jpeg, stars2.jpg).
Is there any way how to do this?

Thanks a lot, Jan

Here is the link: https://codepen.io/yannkuto/pen/jaQPJy

[Beverleyh]

You could use the mt_rand() function in PHP to generate a random number each page load. Just name your hover images 1.jpg, 2.jpg, 3.jpg, etc. and do something like this https://codepen.io/anon/pen/ooQxwy

Note that the PHP code won’t run in CodePen but copy and paste that into your web page and you’ll see the random number loading at the top. The same logic is applied below in the img src. The sample assumes you have 5 images, named sequentially, each with the .jpg extension.

[yann.kuto]

Hi Beverleyh, thank you so much for your help! I copied the code to my browser the only thing is what do you mean by “randomly load number from 1 to 5”.. do I have to put the link of each image? thank you again

[Beverleyh]

Just rename your image files to 1.jpg, 2.jpg, 3.jpg, etc. and use the reduced img markup and CSS provided in your php web page. The paragraphs in the top 2 lines are just a description and standalone demo to explain/show what’s going on, and are not necessary for the functionality of the sample.

The script is randomly writing a number from 1-5 into the markup as the img src filename. If you view the source of the page or inspect it in the dev console, you’ll be able to see what’s happening.

[Author]

Posts