Member Avatar for missy_mi

Hi,

I am doing the mouseover code but what if i dont want it to effect on top of the main image, i want to position the hover image somewhat top/left/right/bottom than the main image. Can it be done?

 <img src="images/b.png" onmouseover="this.src='images/a.png'" onmouseout="this.src='images/b.png'" >

Thank you in advance.

  • 3 Contributors
  • 3 Replies
  • 476 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by missy_mi

Dani AI

Generated

Short answer: don't swap the same image's src. Put the hover image in a separate element, absolutely position it relative to a wrapper, and show/hide it with CSS (or with a small JS class toggle). That keeps layout stable, makes positioning predictable, and avoids the flicker you mentioned. This follows 's advice to affect another element and addresses 's preload point (see the preload snippet below).

A compact CSS-only pattern — the hover image is hidden until the wrapper is hovered; change left/top and transform to place it right/left/top/bottom as needed:

<div class="img-wrap">
  <img class="main" src="images/b.png" alt="Main">
  <img class="hover" src="images/a.png" alt="" aria-hidden="true">
</div>

<style>
.img-wrap { position: relative; display: inline-block; }
.img-wrap .hover {
  position: absolute;
  left: 110%;            /* to the right; use left: -110% for left, top: -110% for above, top:100% for below */
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
  z-index: 10;
}
.img-wrap:hover .hover { opacity: 1; }
</style>

Preload to avoid a one-time load delay:

<link rel="preload" href="images/a.png" as="image">
<!-- or in JS -->
<script>new Image().src = 'images/a.png';</script>

If you need JS control (for positioning elsewhere on the page, or to support touch), add/remove a class on mouseenter/mouseleave or touchstart instead of inline onmouseover attributes.

Troubleshooting notes: ensure the wrapper has position: relative (absolute children use the nearest positioned ancestor), check for competing CSS rules or z-index, avoid hiding by moving elements off-screen (e.g. top: -1000px) — use opacity/display/visibility instead. For accessibility, give meaningful alt text or use alt="" aria-hidden="true" for decorative hover images.

Recommended Answers

All 3 Replies

Member Avatar for JorgeM

Your effect is not really on top of the image. You are manipulating the image itself. Your code is changing the image's source attribute.

If you want to affect some other element, yes you can do that.

I think it would be easier for your mouse over related events to call a function. Within that function, you can specify another image to be shown that is currently hiding positioned somewhere else on the screen.

Member Avatar for Taywin

Also, one more question. Has your image a.png loaded to the page after the page is displayed? If not, it won't work because the call is looking for the already loaded image. You could load and hide the image when the page is loaded. Then it should still work; however, this is not a recommended way to do.

Member Avatar for missy_mi

Also, one more question. Has your image a.png loaded to the page after the page is displayed? If not, it won't work because the call is looking for the already loaded image. You could load and hide the image when the page is loaded. Then it should still work; however, this is not a recommended way to do.

A : Yes, i guess..how do i hide the image??Can you elabrate more??..

Here's the code that i am using now..it works but still have some problem like it suppose to hide first when the page is load and the position still is not position correctly.

<style type="text/css">
#underline4 {
position:relative;
top:100px;
left:-80px;
}

.nav4 {
position:absolute;
top:720px;
left:775px;
}
</style>
<div id="underline4"><img src="images/a.png" width="300" height="150"/></div>

<div class="nav4">
<a href="#"
onmouseover='document.getElementById("underline4").style.top="100px";' onmouseout='document.getElementById("underline4").style.top="-1000px";'
><img src="images/trading.png"/></a><br />
</div>
 </div>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.