Member Avatar for sassy14udd

My Problem


I would like to place the sub links from the left on to the right side with sub links to each individual poem or story from My Soul.

I want the sub-index to pop up in the white box when the selected sub(Poetry, Erotics, Internet)links are clicked on...

also...
Another prob
When I go to make links outa the smaller pics to the left they disappear....
Would like, to hover over small pics n chg the big pic to that one or another and also make it a clickable link to go to that gallery that will be up soon....lol


Only page mostly done...lol
be nice

  • 3 Contributors
  • 6 Replies
  • 103 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by sassy14udd

Dani AI

Generated

A compact, reliable pattern that fixes both issues: keep the white box a fixed container and swap its contents on click, and keep the large display area a fixed-size element while swapping images (or background images) so anchors never change size or overlap. Building on observations from and , the two main causes to avoid are layout shifts (hover resizing) and hidden/overlapped anchors caused by CSS or malformed HTML.

Example structure and simple content-swap (HTML + tiny JS):

<div id="leftNav">
  <a href="#" data-key="poetry">Poetry</a>
  <a href="#" data-key="erotics">Erotics</a>
  <a href="#" data-key="internet">Internet</a>
</div>

<div id="whiteBox" style="min-height:200px;"></div>
var map = {
  poetry: '<ul><li><a href="poem1.html">Poem 1</a></li></ul>',
  erotics: '<ul><li><a href="erotic1.html">Story 1</a></li></ul>'
};
document.getElementById('leftNav').addEventListener('click', function(e){
  var a = e.target;
  if(a && a.dataset && a.dataset.key){
    document.getElementById('whiteBox').innerHTML = map[a.dataset.key] || '';
    e.preventDefault();
  }
});

Thumbnail -> big-image swap that stays stable:

  • Make the big display a fixed box (width/height or aspect-ratio) and swap its background-image or update an <img> src while keeping dimensions static.
  • Store data-large and data-href on thumbnail anchors; on mouseenter set the big box image and update a wrapper anchor href to make the big area clickable for that gallery.
  • Preload large images with new Image().src = url to avoid flashes.

Quick troubleshooting checklist: validate HTML (no unclosed tags or nested anchors), inspect computed styles for display:none or overlapping z-index, give anchors display:block when needed, and use the browser console to watch for 404s. These steps eliminate the disappearing-thumbnail symptom and let the sub-index load cleanly in the white box.

Recommended Answers

All 6 Replies

Member Avatar for MidiMagic

Why does everyone have to use popups and moving images for everything???

The menu on the left wiggles like Jello when the mouse passes over it. Yeeesh! Get the dramamine! Is that a website or an aquarium?

I don't see any photos on the left, or any code for them, in the second page.

To make a picture into a link, put the img tag between the parts of the a tag pair.

Member Avatar for sassy14udd

tysm
i know how to make a <a href> and I did, but when I did the pic totally disappeared.
<a href> first <img src> next, no link no pic came up...but ty n e way...The CSS I borrowed is too advanced for me also.
There are three(3) links in my post, the 2nd one has 3 pics on the right.

Member Avatar for MidiMagic

I can't troubleshoot it unless the code that fails is present.

But you can't put anything complicated inside an a tag. It must not be resized, and it must not overlap other objects (especially other a tags).

I see a circular reference error when a mouse hover changes the size of something inside a pair of a tags. A clickable zone must not change size.

Member Avatar for FC Jamison

Try making the middle image on the right a link so we can see what happens to it.

I'd like to see the image disappear to try and determine what actually happens.

Also, have you looked at your site in multiple browsers? In Firefox, your background image is too small for your content.

Member Avatar for sassy14udd

ok thx guys goin now will try to make the middle pic a link to the file pic
ty FC no I hadnt

Member Avatar for sassy14udd

ok....now that wrkd...lol o well i musta been doing something wrong ....
ty

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.