webmaster1 Posted April 3, 2010 Share Posted April 3, 2010 I want to display and dynamically interchange the text within a <div> when the mouse cursor hovers over either one of four images. For example, image1, image2, image3, and image4 could prompt start, previous, next and end respectivly. Can anyone assist me in triggering the text to be displayed and interchanged as described? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Show Text on Image Hover</title> </head> <body> <div id="showtext"> <?php echo""; ?> </div> <img src="images/image1.jpg" width="25" height="25" alt="image1" name="image1" id="image1" > <img src="images/image2.jpg" width="25" height="25" alt="image2" name="image2" id="image2" > <img src="images/image3.jpg" width="25" height="25" alt="image3" name="image3" id="image3" > <img src="images/image4.jpg" width="25" height="25" alt="image4" name="image4" id="image4" > </body> Link to comment https://forums.phpfreaks.com/topic/197493-display-text-on-image-hover/ Share on other sites More sharing options...
ialsoagree Posted April 3, 2010 Share Posted April 3, 2010 This isn't something you can do with PHP, this is a javascript issue. <script type="text/javascript"> function change_div_text(text) { document.getElementById('showtext').innerHTML = text; } </script> <img onmouseover="change_div_text('Some text here')" onmouseout="change_div_text('')" src="images/image1.jpg" width="25" height="25" alt="image1" name="image1" id="image1" > <img onmouseover="change_div_text('Other text here')" onmouseout="change_div_text('')" src="images/image2.jpg" width="25" height="25" alt="image2" name="image2" id="image2" > etc. Link to comment https://forums.phpfreaks.com/topic/197493-display-text-on-image-hover/#findComment-1036549 Share on other sites More sharing options...
Lukeidiot Posted April 3, 2010 Share Posted April 3, 2010 I want to display and dynamically interchange the text within a <div> when the mouse cursor hovers over either one of four images. For example, image1, image2, image3, and image4 could prompt start, previous, next and end respectivly. Can anyone assist me in triggering the text to be displayed and interchanged as described? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Show Text on Image Hover</title> </head> <body> <div id="showtext"> <?php echo""; ?> </div> <img src="images/image1.jpg" title="test" width="25" height="25" alt="image1" name="image1" id="image1" > <img src="images/image2.jpg" title="test" width="25" height="25" alt="image2" name="image2" id="image2" > <img src="images/image3.jpg" title="test" width="25" height="25" alt="image3" name="image3" id="image3" > <img src="images/image4.jpg" title="test" width="25" height="25" alt="image4" name="image4" id="image4" > </body> I'ved add the "title" attribute to the img tag. Link to comment https://forums.phpfreaks.com/topic/197493-display-text-on-image-hover/#findComment-1036551 Share on other sites More sharing options...
webmaster1 Posted April 3, 2010 Author Share Posted April 3, 2010 This isn't something you can do with PHP, this is a javascript issue. That's exactly what I was trying to achieve, much thanks. My JavaScript skills are reserved mainly to editing large chucks of copied and pasted unoriginal code. I was trying to figure out how to do this on W3schools but just couldn't piece it together. Cheers! Link to comment https://forums.phpfreaks.com/topic/197493-display-text-on-image-hover/#findComment-1036567 Share on other sites More sharing options...
webmaster1 Posted April 3, 2010 Author Share Posted April 3, 2010 I'ved add the "title" attribute to the img tag. Thanks! Link to comment https://forums.phpfreaks.com/topic/197493-display-text-on-image-hover/#findComment-1036569 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.