locked
Mouse over image RRS feed

  • Question

  • User-401818107 posted

    Hi experts, When mouse over the image, it will display the text "VIEW". How to accomplish this?I have the code below.

    <img  src="<%=LINK_IMAGES%>150x110/<%# DataBinder.Eval(Container.DataItem, "idProduct") %>.jpg" alt="" /></a>

    Thank you!

    Friday, November 16, 2018 9:30 PM

Answers

  • User283571144 posted

    Hi Jessy,

    As far as I know, we couldn't style an actual title attribute.

    How the text in the title attribute is displayed is defined by the browser and varies from browser to browser. It's not possible for a webpage to apply any style to the tooltip that the browser displays based on the title attribute.

    Here is a workaround.

    We could use a span as a title and use javascript img.onmousemove function to show or hide the span when mouse over the image.

    We could modify the span style to add the span's background and bold the word VIEW.

    More details, you could refer to below codes:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            span {
                ;
                display: none;
                font-weight: 800;
                background: darkgrey;
                width: 50px;
                height: 30px;
            }
            /*you can set the css of span to set the position and font-weight of VIEW to bold the word*/
        </style>
        <script>
            window.onload = function () {
                var span = document.getElementById("span1");
                var img = document.getElementById("img1");
                img.onmousemove = function (ev) {
                    span.style.display = "block";
                    var oEvent = ev || event;
                    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                    var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
                    span.style.left = oEvent.clientX + scrollLeft + 10 + 'px';
                    span.style.top = oEvent.clientY + scrollTop + 10 + 'px';
    
                }//use javascript to
                img.onmouseleave = function () {
                    span.style.display = "none";
                }
            }
        </script>
    
    
    </head>
    <body>
             <form id="form1" runat="server">
                <div>
                    <img id="img1" src="http://www.w3schools.com/html/pic_mountain.jpg" />
                    <span id="span1">VIEW</span>
                </div>
            </form>
    </body>
    </html>

    Result:

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, November 19, 2018 9:35 AM
  • User477186420 posted

    Hi,

    There are few jQuery plugins also which gives you fancy tool tips

    http://iamceege.github.io/tooltipster/

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 20, 2018 6:28 AM

All replies

  • User2053451246 posted

    Add a title attribute to the img tag.

    <img title="VIEW" src=".....

    Friday, November 16, 2018 9:52 PM
  • User-401818107 posted

    Thank you! How to style the title? e.g. add the backgroud to the word VIEW and bold the word VIEW.

    Thank you!

    Friday, November 16, 2018 11:03 PM
  • User-401818107 posted

    Could any of the experts advise how to style the title? Thank you!

    Sunday, November 18, 2018 4:23 AM
  • User283571144 posted

    Hi Jessy,

    As far as I know, we couldn't style an actual title attribute.

    How the text in the title attribute is displayed is defined by the browser and varies from browser to browser. It's not possible for a webpage to apply any style to the tooltip that the browser displays based on the title attribute.

    Here is a workaround.

    We could use a span as a title and use javascript img.onmousemove function to show or hide the span when mouse over the image.

    We could modify the span style to add the span's background and bold the word VIEW.

    More details, you could refer to below codes:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            span {
                ;
                display: none;
                font-weight: 800;
                background: darkgrey;
                width: 50px;
                height: 30px;
            }
            /*you can set the css of span to set the position and font-weight of VIEW to bold the word*/
        </style>
        <script>
            window.onload = function () {
                var span = document.getElementById("span1");
                var img = document.getElementById("img1");
                img.onmousemove = function (ev) {
                    span.style.display = "block";
                    var oEvent = ev || event;
                    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                    var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
                    span.style.left = oEvent.clientX + scrollLeft + 10 + 'px';
                    span.style.top = oEvent.clientY + scrollTop + 10 + 'px';
    
                }//use javascript to
                img.onmouseleave = function () {
                    span.style.display = "none";
                }
            }
        </script>
    
    
    </head>
    <body>
             <form id="form1" runat="server">
                <div>
                    <img id="img1" src="http://www.w3schools.com/html/pic_mountain.jpg" />
                    <span id="span1">VIEW</span>
                </div>
            </form>
    </body>
    </html>

    Result:

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, November 19, 2018 9:35 AM
  • User477186420 posted

    Hi,

    There are few jQuery plugins also which gives you fancy tool tips

    http://iamceege.github.io/tooltipster/

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 20, 2018 6:28 AM