How to display different text in one place depending on mouseover on images

  • Resolved alexa-kt

    (@alexa-kt)


    9 years, 4 months ago

    Hi there!

    I am a little new to wordpress so please have patience ??

    I am trying to add a text box above a carousel of images where each image you hover on will show the different name in the same text box above. Does anyone know how to do this/if there is a good plugin for this?

    I found this previous answer 5 years ago but I am unsure what ‘YOUR_TARGET_DIV_ID_HERE’ means and where to find the <img> tag to add this to:

    Add this to the <img> tag for each of your images (in the HTML view):

    onMouseover=”document.getElementById(‘YOUR_TARGET_DIV_ID_HERE’).innerHTML = ‘Text revelevant to this image here’;”

    I have no idea if there is a plugin to do this in a more automated fashion, but this should work.

    https://www.ads-software.com/support/topic/different-text-in-specific-div-depending-on-mouseover?replies=6

    Many thanks in advance for your help!

    Alexa

Viewing 5 replies - 1 through 5 (of 5 total)

  • Here.. created a fiddle :- https://jsfiddle.net/shadez/hjLk9do6/

    you will need to make changes to your theme files. modifying slider code complicates stuff. hope you know how to.
    edit with care and with backups.

    Thread Starter alexa-kt

    (@alexa-kt)

    Hello Shadez,

    Thank you for your reply! Sorry for my lack of knowledge on this but the fiddle you created, how do I use it/where do I put it? I will need to go into perhaps functions and add the HTML then in each page I use the carousel add the CSS? (This may sound stupid, I don’t know haha)

    Kind regards
    Alexa

    Whats your website?
    How have you implemented the carousal? As in, used a plugin, or used a code from web and deployed in your theme file/s?
    Which all pages does the carousal show up in?
    What are the contents in the carousal? I mean, are they static/fixed contents, or change according to post/category/etc?
    I assume the text to change as per your request is the title of posts (the_title()) being displayed in the carousal? Or is it the content? Or some other text?

    If you are using a plugin for the carousal then modifying that code is tricky coz you gotto modify the plugin files probably, which is highly not advisable for beginners.

    Yes, you can create a function in functions.php file and call it wherever you want the carousal to show up. But again, that depends on what is contained in your carousal. is it ‘featured-images’ from a set of posts or set of images with direct path and static? depending on where you are placing the function(), the implementation may vary.

    if you are unsure of all of this and editing wordpress theme files, then i honestly suggest to hire a WordPress developer coz this isnt easy per se. i thought you were working on the files already hence i shared the fiddle code.

    Thread Starter alexa-kt

    (@alexa-kt)

    Sadly my website is run locally at the moment…

    The carousel is an element I used from the plugin ‘visual composer’:

    https://codecanyon.net/item/carousel-anything-for-visual-composer/8621711?ref=wpbakery&vc_outbound=true

    https://pasteboard.co/1My1BqMF.png

    I used an element called ‘content box’ to make a border and then ‘advanced carousel’ which I added the ‘single images’. Inside I can link them to an individual product page for when I click on them:

    https://pasteboard.co/1MxggX0D.png

    At the moment it previews like this:

    https://pasteboard.co/1MxkXmgJ.png

    What I would like it to look like is this:

    https://pasteboard.co/1MxwDCXo.png

    The text is just the name of the product, each one will be different. The images are just what I uploaded as in not linked to the feature image (but it can be as the product pages do have the same feature image?

    It appears on each subpage which shows the products for that range (I have 11 pages like this that I need it on)

    I hope I made some sense there?
    Thanks again for helping me!
    Kind regards,
    Alexa

    Thanks for taking time and explaining. unfortunately we have hit a roadblock.
    i cant see your website structure
    that plugin is paid stuff (and am not purchasing :P)
    11 pages means gotto check code placement and integration
    yours seems to be a ecom website. so need to check what other plugins you use.

    I suggest hiring a dev.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to display different text in one place depending on mouseover on images’ is closed to new replies.