0

I have a working grid, with images and links, so when you click the image, it takes you to the link.

Here is the working Axios code. (Working means this const is part of the other code):

const grid_display = ({ url, key }) =>
React.createElement("div", { className: "image-item", key: key },
React.createElement("a", { href: "https://www.example.com"},
React.createElement("img", { className: "grid-img", src: url })));

So I need to add to that code, the following:

  1. A mouseover / hover event
  2. Play a mp4 file (basically a link to a sound), via script function
  3. Keep same code, but just ADD the playing of sound
  4. NOTE: this code is all dynamic: all images, links, sounds are passed into this script from a database.
  5. Can't use any type of extra plugin .
  6. I'm looking to just add the correct line or syntax so the React.createElement statement works/adds the mouseover event or hover event.

As far as how the sound is played... any way that is fast, simple, uses minimal resources, etc. I'm thinking the sound clips will only be 5 seconds, 10 at max.

So, the better issue I'm having is, how do you put this solution...

https://css-tricks.com/play-sound-on-hover/?fbclid=IwAR29jK_YgvtCV6Yvl9gWEwa3-P1n6lHEKKZmBoKnR0M2QHMnrCp-3g_7SQo

...in the React.createElement statements above?

jkdev
  • 11,360
  • 15
  • 54
  • 77
user1864734
  • 135
  • 3
  • 13
  • 1
    *"Here is working Axios code:"* What makes that "Axios" code? – T.J. Crowder Jul 02 '19 at 13:59
  • Just use a standard React `onMouseEnter` handler that plays the sound, see the linked question's answers. – T.J. Crowder Jul 02 '19 at 14:02
  • Hi T.J. Thanks for the link and sorry for not labeling things correctly. However, I will add a few more requirements: 5) can't use any type of extra plugin 6) I looking to just add the correct line or syntax so the React.createElement statement works/adds the mouse over event – user1864734 Jul 02 '19 at 14:48
  • also, "Just use a standard React onMouseEnter handler that plays the sound", I saw some other scripts/ideas.... nothing is working? I can't write the syntax so the onmouseover syntax appears on the html grid. There are no errors, but the text just doesn't appear? – user1864734 Jul 02 '19 at 14:54
  • I disagree that this is a duplicate question. Is there a way to remove TJ's marked duplicate? – user1864734 Jul 02 '19 at 15:26
  • 1
    The play sound part is a duplicate; otherwise, it's too broad. Break the problem up into pieces, solve each piece. Each piece very likely has already been addressed in a question and answer here on SO. If you're having trouble solving one particular piece, post a [mcve] of your attempt and say specifically where you're stuck. People will be glad to help. :-) – T.J. Crowder Jul 02 '19 at 15:34

0 Answers0