ceu | Javascript for changing image and text at the same time on click (Reply)

I don't write a lot of Javascript code, but a friend wanted some help with website stuff and I'm always happy to help, so I wrote some code for her. I'm sharing it here for archival reasons, but also if anyone happens to stop by and is interested in implementing this logic themselves.

You will need some familiarity with HTML, CSS, and algorithmic code for this. I will not be explaining it in detail here.

What this code does: For each in-page click with the corresponding ID, a random image will be selected and changed per click. At the same time, text elsewhere on the page will also change, per the webmaster's preset settings.

What this code is for: Websites that utilize iframes as internal navigation, in order to allow the title of the page, not within the iframe, to change; simultaneously this allows the random image to change with each new iframe navigation without leaving or refreshing the page.

1. In the top of your page, within the <head>, paste this code and edit it to your liking. Anything that requires edits or for you to add information will be indicated with YOUR-IMAGE-URL, YOURSECTIONNAME, and YOUR SECTION NAME. See comments (indicated by //) for further instructions.

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

function changeImage() {
        // Get the image element by its ID
        let img = document.getElementById("randImg");
        // Set the new image source
        img.src = getImageTag();
      // Change to a different (random?) image
    }
    
    function openTab(evt, tabName) { // this code from w3schools lol
  // Declare all variables
  var i, tabcontent, tablinks;

// Get all elements with class="tabcontent" and hide them
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

// Get all elements with class="tablinks" and remove the class "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

// Show the current tab, and add an "active" class to the button that opened the tab
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
} 	
	
function title_YOURSECTIONNAME0(){ // the name of your section, such as home or about. no spaces.
    document.getElementById("title").innerHTML = "YOUR SECTION NAME 0"; // how you would like the title of your section to appear (spaces ok)
    changeImage();
}

function title_YOURSECTIONNAME1(){ // the name of your section, such as home or about. no spaces.
    document.getElementById("title").innerHTML = "YOUR SECTION NAME 1"; // how you would like the title of your section to appear (spaces ok)
    changeImage();
}

function title_YOURSECTIONNAME2(){ // the name of your section, such as home or about. no spaces.
    document.getElementById("title").innerHTML = "YOUR SECTION NAME 2"; // how you would like the title of your section to appear (spaces ok)
    changeImage();
}

function title_YOURSECTIONNAME3(){ // the name of your section, such as home or about. no spaces.
    document.getElementById("title").innerHTML = "YOUR SECTION NAME 3"; // how you would like the title of your section to appear (spaces ok)
    changeImage();
}

function title_YOURSECTIONNAME4(){ // the name of your section, such as home or about. no spaces.
    document.getElementById("title").innerHTML = "YOUR SECTION NAME 4"; // how you would like the title of your section to appear (spaces ok)
    changeImage();
}

// you can add more sections if you want, just copy and paste from function to the closing bracket

</script>

2. For the links that are meant to be clicked to change both the image and the text, format the code of each link like this:

<a onclick="title_YOURSECTIONNAME0()" href="YOUR-IFRAME-URL.html" target="YOUR-IFRAME-ID">NAVIGATION TEXT</a>

YOURSECTIONNAME0 should match the function title_YOURSECTIONNAME0 from the Javascript above.
YOUR-IFRAME-URL.html and YOUR-IFRAME-ID are respective to you and how you would typically link and target the iframes.
NAVIGATION TEXT is the text that appears on the webpage to be clicked to make all of this happen.

3. To display the random image, use this for where you would like the image to display, instead of the typical <img src=""> code:

<img id="randImg" src="document.write(getImageTag());" alt="">

4. If you'd like a random image to automatically generate on page load, use the following code to initialize your webpage's body. Make sure there is no additional <body> in your code:

<body onload="changeImage();">

If you do not use this code, no image will show up on page load, and will only start working when the respective links are clicked.

5. To change the page title outside of the iframe, identify the dynamic text like this:

<div id="title">INITIAL TEXT</div>

The text does not have to be in divs (for example, you could use <h1 id="title">), as long as it has the title ID. INITIAL TEXT is what the text will first read upon page load, i.e. perhaps something like 'Home' or the overall name of your site.

INITIAL TEXT will change to whatever you put in the double quotes of YOUR SECTION NAME 0 (and so on) per each function.

-

You can check out a demo of the code on CodePen. (click)

being with you

already feels like freedom

Javascript for changing image and text at the same time on click (Reply)

Custom Text

Links

Javascript for changing image and text at the same time on click